So fügen Sie einen Fortschrittsbalken zum Hochladen von Bildern in Axios hinzu

Dieses Mal zeige ich Ihnen, wie Sie einen Fortschrittsbalken zu hochgeladenen Bildern in Axios hinzufügen. Was sind die Vorsichtsmaßnahmen zum Hinzufügen eines Fortschrittsbalkens zu hochgeladenen Bildern in Axios? ist ein praktischer Fall.

Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann.

Funktionen

Erstellen Sie XMLHttpRequests

über den Browser Erstellen Sie eine HTTP-Anfrage aus node.js

Support Promise API

Abfangen von Anfragen und Antworten

Anfragedaten und Antwortdaten konvertieren

Anfrage stornieren

JSON-Daten automatisch konvertieren

Der Kunde unterstützt die Abwehr von XSRF

Das Folgende ist eine Einführung in die Verwendung von Axios zum Implementieren der Funktion zum Hochladen von Bildfortschrittsbalken. Der spezifische Inhalt lautet wie folgt:

In einem aktuellen Projekt müssen bis zu Dutzende Bilder hochgeladen werden, aber am Ende sind sie immer noch sehr groß. Wenn die Netzwerkkarte verwendet wird, ist die Upload-Zeit sehr gering Beim Laden weiß der Benutzer nicht, wie viel ich hochgeladen habe. Um den Fortschritt des Uploads intuitiver anzuzeigen, ist es am besten, den Fortschrittsbalken und den Prozentsatz des Uploads anzuzeigen Das Projekt verwendet das VueJS-Framework Mint-UI als UI-Framework. Die Anforderung wird von Axios offiziell empfohlen (wirklich leistungsstark). Referenz Hier ist die offizielle Einführung von Axios auf Chinesisch):

„Aufgrund der Verwendung von VueJS müssen die Datenanforderungen von der Schnittstelle einheitlich verwaltet werden, um die Verwaltung zu erleichtern. Wenn es in jeder Komponente platziert wird, ist es für die zukünftige Wartung und Verwaltung unpraktisch; in der Datei reqwest.js ist eine uploadPhoto-Methode definiert, die drei Parameter, nämlich Parameter, und zwei Rückruffunktionen

, die Parameter, hat sind die Parameter, die wir zum Hochladen des Bildes benötigen; die erste Rückruffunktion dient dazu, die im Upload-Fortschritt enthaltenen Daten abzurufen, und die zweite Rückruffunktion dient dazu, die vom Hintergrund zurückgegebenen Daten abzurufen, wenn der Upload erfolgreich ist oder fehlschlägt Schritt der Seite.

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

Verwenden Sie die Progress-Komponente in der Mint-UI-Komponente und definieren Sie die Variable „precent“ in der Datenmethode. Achten Sie beim Definieren auf

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

Importieren Sie die Datei reqwest.js, rufen Sie die Methode uploadPhoto ab und verwenden Sie das Attribut $nextTick, um die Seite basierend auf dem Upload-Fortschritt in Echtzeit zu aktualisieren.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

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

So optimieren Sie die JSON-Datengruppierung von JS

Ajax ändert direkt den Status und löscht die Nicht-Aktualisierungsstatus

Das obige ist der detaillierte Inhalt vonSo fügen Sie einen Fortschrittsbalken zum Hochladen von Bildern in Axios hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!