Funktion zur Anzeige des Fortschrittsbalkens beim Hochladen von Bildern mit axios implementieren

Axios ist eine auf Promise basierende HTTP-Bibliothek, die sowohl im Browser als auch in node.js verwendet werden kann.

Funktionen

XMLHttpRequests vom Browser erstellen

HTTP-Anfragen von node.js erstellen

Unterstützung von Promise-API

Abfangen von Anfragen und Antworten

Konvertierung von Anfrage- und Antwortdaten

Anfrage abbrechen

Automatische Konvertierung von JSON-Daten

Clientseitige Unterstützung für XSRF-Abwehr

Nachfolgend werde ich die Verwendung von Axios zur Implementierung der Funktion zum Anzeigen des Fortschrittsbalkens beim Hochladen von Bildern vorstellen. Der genaue Inhalt ist wie folgt beschrieben:

　In den letzten Projekten mussten auf einer mobilen Seite maximal mehrere Dutzend Bilder hochgeladen werden. Obwohl die Fotos komprimiert wurden, waren sie am Ende dennoch groß. Wenn es um die Netzwerkverbindung geht, war die Übertragungszeit schlecht. Wenn ständig geladen wird, weiß der Benutzer nicht, wie viel er hochgeladen hat. Um den Fortschritt der Übertragung intuitiver darzustellen, wäre es am besten, einen Fortschrittsbalken und den Prozentsatz der Übertragung anzuzeigen;

　　Das Projekt verwendet das Vue.js-Framework, mint-ui ist als UI-Framework; Es wird das von der offiziellen Vue.js empfohlene axios angefordert (es ist wirklich mächtig); In der offiziellen Dokumentation von axios wird die Verwendung des Originals beschriebenUpload-VerarbeitungsfortschrittserreignisBitte参阅 hier (hier ist die offizielle chinesische Dokumentation von axios):

 onUploadProgress: function (progressEvent) {
  // Verarbeitung des Original-Progress-Ereignisses
 },

　　Da Vue.js verwendet wird, müssen die Datenanfragen an die Schnittstelle, um die Verwaltung zu erleichtern, einheitlich verwaltet werden. Wenn sie in jeder Komponente platziert werden, ist die Wartung und Verwaltung in der Zukunft nicht bequem; In der Datei reqwest.js wurde eine Methode uploadPhoto definiert, die drei Parameter hat, nämlich Parameter und zwei Callback-Funktionen. Der Parameter ist die zusätzlichen Parameter, die für das Hochladen des Bildes erforderlich sind; Der erste Callback ist der Datenübergang der Upload-Progress, der zweite Callback ist der Erfolg oder Misserfolg des Uploads, die Daten, die vom Backend zurückgegeben werden, um die nächsten Schritte auf der Seite auszuführen.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //Das Ereignis für den Original-Upload-Fortschritt
        if(progressEvent.lengthComputable){
          //Die Eigenschaft lengthComputable zeigt hauptsächlich an, ob die Gesamtmenge der zu erledigenden Arbeit und die bereits abgeschlossene Arbeit gemessen werden können
          //Wenn lengthComputable falsch ist, können progressEvent.total und progressEvent.loaded nicht erhalten werden
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

Verwenden Sie mint-der Progress-Komponente in der ui-Komponente, im data-Methode definiert der Variable precent in der Komponente, die Variable ist vom Typ number, beim Definieren achten Sie darauf;　

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

将reqwest.js 这个文件导入，获取到uploadPhoto这个方法，根据获取上传的进度，使用$nextTick 这个属性，实时更新页面上。

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

　　根据上面的方法基本实现图片的上传进度和百分比的显示，剩下的就是UI了。根据自己个性化定制来实现你那完美的需求...

总结

以上所述是小编向大家介绍的使用axios实现上传图片进度条功能，希望对大家有所帮助。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！

声明：本文内容来自网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）