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

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>

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 'axios'
Vue.prototype.$http = axios

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: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}

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;}">

vue-js

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

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!