Implémentation de la fonction de barre de progression de téléchargement d'image avec axios

Axios est une bibliothèque HTTP basée sur Promise, utilisable dans le navigateur et node.js.

Fonctionnalités

Créer XMLHttpRequests à partir du navigateur

Créer une requête HTTP à partir de node.js

Support de l'API Promise

Intercepter les requêtes et les réponses

Conversion des données de requête et de réponse

Annuler la demande

Conversion automatique des données JSON

Le client prend en charge la défense XSRF

Voici une introduction à la fonction de barre de progression de téléchargement d'images utilisant axios, comme indiqué dans le contenu suivant:

　Dans les projets récents, une page de téléphone portable peut télécharger jusqu'à quelques dizaines d'images, bien que les photos aient été compressées, elles sont encore très grandes. Si c'est un réseau, le temps de téléchargement est mauvais. Si c'est en chargement, l'utilisateur ne sait pas combien il a téléchargé. Pour mieux montrer le progrès du téléchargement, il est préférable d'afficher une barre de progression et d'afficher le pourcentage de téléchargement;

　　le projet utilise le cadre vuejs, mint-ui agit comme cadre UI ; il demande axios recommandé par l'officialité de vue (très puissant) ; dans l'introduction officielle d'axios, il est utilisé nativementévénement de progression de téléversementpour plus d'informations, voir ici (ici, il y a une introduction officielle en chinois d'axios) :

 onUploadProgress: function (progressEvent) {
  // traitement de l'événement de progression natif
 },

　　parce que nous utilisons vuejs, pour la gestion des données des interfaces, pour la commodité de la gestion, il est nécessaire de gérer de manière centralisée. Si elle est placée dans chaque composant, elle ne sera pas pratique pour la maintenance et la gestion à l'avenir ; dans le fichier reqwest.js, une méthode uploadPhoto est définie, cette méthode a trois paramètres, à savoir les paramètres, et deux fonctions de rappel, les paramètres sont les paramètres nécessaires pour téléverser l'image ; et la première fonction de rappel est de récupérer les données de progression du téléversement, la deuxième fonction de rappel est de récupérer les données de succès ou d'échec du téléversement, les données retournées par le serveur pour la prochaine opération de la page.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //événement natif de progression du téléversement
        if(progressEvent.lengthComputable){
          //l'attribut lengthComputable indique principalement si la quantité totale de travail à effectuer et la quantité de travail déjà effectuée peuvent être mesurées
          //si lengthComputable est faux, on ne peut pas obtenir progressEvent.total et progressEvent.loaded
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    })
  }

l'utilisation de mint-l'élément Progress de l'UI composant, dans la méthode data, définir la variable precent de l'élément Progress, cette variable est de type number, en définissant, attention à ;　

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

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

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('Téléversement de l'image réussi').then(action => {
     console.log('ok');
    });
  }
})

　　Selon la méthode mentionnée ci-dessus, la progression de téléversement de l'image et le pourcentage sont principalement réalisés. Ce qui reste est l'ui, personnalisé pour réaliser vos besoins parfaits...

Résumé

Les points mentionnés ci-dessus sont les explications de l'éditeur sur la manière d'implémenter la barre de progression de téléversement d'image avec axios, j'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message, l'éditeur répondra à temps. Merci également de votre soutien au site de tutoriels de cri de guerre !

Déclaration : Le contenu de cet article est issu du réseau, propriété des auteurs respectifs. Le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)