Utilisez axios pour télécharger des fichiers dans vue-js tutoriel-php.cn

Utilisez axios pour télécharger des fichiers dans vue

亚连

Libérer： 2018-06-19 16:43:05

original

2228 Les gens l'ont consulté

J'ai récemment appris axios, puis je l'ai utilisé dans le projet, donc cet article vous présente principalement les informations pertinentes sur l'utilisation d'axios dans vue pour réaliser une mise à jour en temps réel de la progression du téléchargement de fichiers. L'article donne d'abord un bref aperçu. introduction à axios et à ses méthodes. Tout le monde comprend l'apprentissage. Les amis qui en ont besoin peuvent apprendre ensemble ci-dessous.

introduction à axios

axios est un client HTTP basé sur Promise pour les navigateurs et nodejs :

Créer XMLHttpRequest à partir du navigateur
Faire une requête http à partir de node.js
API de promesse de support
Interception des demandes et des réponses
Convertir les données de demande et de réponse
Annuler la demande
Convertir automatiquement les données JSON
Le client prend en charge la prévention CSRF/XSRF

Méthode d'introduction :

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Copier après la connexion

Lors de l'installation d'autres plug-ins, vous pouvez les introduire directement dans main.js et utiliser Vue.use() pour vous inscrire, mais axios n'est pas un plug-in vue, vous ne pouvez donc pas utiliser

. Il ne peut donc être introduit qu'à la volée dans chaque composant qui doit envoyer une requête. Vue.use()

Afin de résoudre ce problème, après avoir introduit axios, nous avons modifié la chaîne prototype pour la rendre plus pratique à utiliser.

//main.js

import axios from &#39;axios&#39;
Vue.prototype.$http = axios

Copier après la connexion

Après avoir ajouté ces deux lignes de code à main.js, vous pouvez utiliser la commande $http directement dans les méthodes du composant

methods: {
postData () {
this.$http({
method: &#39;post&#39;,
url: &#39;/user&#39;,
data: {
name: &#39;xiaoming&#39;,
info: &#39;12&#39;
}
})
}

Copier après la connexion

Pour des connaissances plus basiques, vous pouvez vous référer à cet article : //www.jb51.net/article/110324.htm

Vue utilise axios pour implémenter des mises à jour en temps réel de progression du téléchargement de fichiers

XHR niveau 2 a ajouté un événement de progression, grâce auquel nous pouvons ajouter une barre de progression des données en temps réel pendant que le navigateur reçoit de nouvelles données, rendant l'interaction plus conviviale

modèle vue

<p class="progress" @click="upload"
   :style="{backgroundImage:&#39;linear-gradient(to right,#C0C7CB 0%,#C0C7CB &#39;+progress+&#39;,#E1E6E9 &#39;+progress+&#39;,#E1E6E9 100%)&#39;}">

Copier après la connexion

vue-js

 var form = new FormData()
 form.append(&#39;file&#39;, vm.$refs.upload.files[0])
 form.append(&#39;id&#39;, id)
 form.append(&#39;type&#39;, type)
 var config = {
  onUploadProgress: progressEvent => {
   var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + &#39;%&#39;
   this.progress = complete
  }
 }
 axios.post(`api/uploadFile`,
  form, config).then((res) => {
  if (res.data.status === &#39;success&#39;) {
   console.log(&#39;上传成功&#39;)
  }
 })

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère. cela vous sera utile à l'avenir.

Articles associés :

Y a-t-il une erreur lors de l'appel de fs.renameSync dans Node.js ?

Comment configurer l'environnement de développement React Native dans VSCode

Comment installer Mint-UI dans vue

Comment implémenter l'affichage du parcours des données de collecte dans AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!