Comment ajouter une barre de progression pour télécharger des images dans axios

Cette fois, je vais vous montrer comment ajouter une barre de progression aux images téléchargées dans axios. Quelles sont les précautions pour ajouter une barre de progression aux images téléchargées dans axios. est un cas pratique. Jetons un coup d'œil.

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

Caractéristiques

Créer XMLHttpRequests

depuis le navigateur Créer une requête http à partir de node.js

API de promesse de support

Intercepter les demandes et les 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 est une introduction à l'utilisation d'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 de téléphone mobile doit télécharger jusqu'à des dizaines d'images. 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. chargement, l'utilisateur ne sait pas combien j'ai téléchargé. Afin de montrer 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 comme framework UI ; la requête est axios officiellement recommandée par vue (vraiment puissante) ; dans axios, l'introduction officielle est d'utiliser la progression du traitement de téléchargement natif événement (spécifique référence Ici, voici l'introduction officielle d'axios en chinois) :

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

 En raison de l'utilisation de vuejs, les demandes de données depuis l'interface doivent être gérées de manière uniforme pour faciliter la gestion. 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, qui a trois paramètres, à savoir les paramètres, et deux fonctions de rappel , les paramètres sont les paramètres dont nous avons besoin pour télécharger l'image ; la première fonction de rappel consiste à obtenir les données contenues dans la progression du téléchargement, et le deuxième rappel consiste à obtenir les données renvoyées par l'arrière-plan si le téléchargement a réussi ou a échoué pour effectuer le suivant ; étape 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. Lors de la définition, faites attention ; 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.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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');
    });
  }
})

Lecture recommandée :

Comment optimiser le regroupement de données JSON de JS

ajax modifie directement le statut et supprime le statut de non-actualisation

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!