Comment utiliser axios pour télécharger des images avec une fonction de barre de progression

Axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js. Cet article présente principalement l'utilisation d'axios pour implémenter la barre de progression du téléchargement d'images. Les amis qui en ont besoin peuvent se référer à

Axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js.

Fonctionnalités

Créer des requêtes XMLHttp à partir du navigateur

Créer des requêtes http à partir de node.js

API de promesse de support

Interception des demandes et des réponses

Convertir les données de demande et les données de réponse

Annuler la demande

Convertir automatiquement les données JSON

Le client prend en charge la défense contre XSRF

Ce qui suit vous présentera comment utiliser axios pour implémenter la fonction de barre de progression de téléchargement d'image. Le contenu spécifique est le suivant :

Dans un. projet récent, une page mobile doit télécharger des dizaines d'images au maximum. Bien que les images soient compressées, elles sont finalement très volumineuses si la carte réseau est utilisée, le temps de téléchargement est très faible. l'utilisateur ne saura pas combien il a téléchargé. Afin d'afficher la progression du téléchargement de manière plus intuitive, il est préférable d'afficher la barre de progression et le pourcentage de téléchargement

Le projet utilise le framework vuejs, mint-ui ; en tant que framework d'interface utilisateur ; la requête est axios, qui est officiellement recommandée par Vue (Axios introduit officiellement l'utilisation des événements de progression du traitement de téléchargement natifs (voir ici pour plus de détails, voici l'introduction officielle chinoise d'axios) :

 onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

Du fait de l'utilisation de vuejs, pour les requêtes de données depuis l'interface, afin de faciliter la gestion, une gestion unifiée est requise. Si elle est placée dans chaque composant, elle sera peu pratique pour la maintenance et la gestion futures ; dans le fichier reqwest.js, une méthode uploadPhoto est définie. Cette méthode a trois paramètres, à savoir des paramètres et deux fonctions de rappel. Les paramètres sont ce que nous voulons télécharger. . Les paramètres requis de l'image : la première fonction de rappel consiste à obtenir les données contenues dans la progression du téléchargement, et la deuxième fonction de rappel consiste à obtenir les données renvoyées par l'arrière-plan si le téléchargement réussit ou échoue pour effectuer l'opération suivante ; de la page.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
        if(progressEvent.lengthComputable){
          //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
          //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    })
  }

Utilisez le composant Progress dans le composant mint-ui et définissez la variable "precent" dans le composant dans la méthode de données. La variable est de type numéro, faites attention ; >

<mt-progress :value="precent" :bar-height="10">
   <p slot="end">{{Math.ceil(precent)}}%</p>
  </mt-progress>

Importez le fichier reqwest.js, obtenez la méthode uploadPhoto et utilisez l'attribut $nextTick pour mettre à jour la page en temps réel en fonction de la progression du téléchargement.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded,
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   })
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('图片上传成功').then(action => {
     console.log('ok');
    });
  }
})

Réalisez essentiellement l'affichage de la progression et du pourcentage de téléchargement des images en fonction de la méthode ci-dessus. Le reste est une interface utilisateur, qui peut être personnalisée en fonction de votre propre personnalité pour répondre à vos besoins parfaits...

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

Articles connexes :

Comment implémenter un flux de cascade de disposition aléatoire dans ionic3

Comment utiliser Redux dans les projets React (tutoriel détaillé)

Comment augmenter automatiquement la valeur en JavaScript

Comment utiliser Swiper pour implémenter la pagination

Comment utiliser Bus dans la communication des composants Vue

Comment implémenter des invites de texte sensibles dans Angular

Comment implémenter l'affichage caché dans Angular

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!