So verwenden Sie axios zum Hochladen von Bildern mit einer Fortschrittsbalkenfunktion

Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann. In diesem Artikel wird hauptsächlich die Verwendung von Axios zum Implementieren des Fortschrittsbalkens beim Hochladen von Bildern vorgestellt. Freunde, die es benötigen, können auf

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

Funktionen

XMLHttpRequests über den Browser erstellen

HTTP-Anfragen von node.js erstellen

Support Promise API

Abfangen von Anfragen und Antworten

Anfragedaten und Antwortdaten konvertieren

Anfrage abbrechen

JSON-Daten automatisch konvertieren

Client unterstützt die Abwehr von XSRF

Im Folgenden erfahren Sie, wie Sie mit axios die Funktion zum Hochladen von Bildfortschrittsbalken implementieren. Der spezifische Inhalt lautet wie folgt:

In a Aktuelles Projekt, a Die mobile Seite muss höchstens Dutzende Bilder hochladen, ist aber am Ende immer noch sehr groß. Wenn die Netzwerkkarte verwendet wird, ist die Upload-Zeit sehr gering. Der Benutzer weiß nicht, wie viel er hochgeladen hat. Um den Upload-Fortschritt intuitiver anzuzeigen, ist es am besten, den Fortschrittsbalken und den Upload-Prozentsatz anzuzeigen.

Das Projekt verwendet das vuejs-Framework mint-ui Als UI-Framework wird Axios offiziell von vue empfohlen (wirklich leistungsstark); Axios führt offiziell die Verwendung nativer Upload-Verarbeitungsfortschrittsereignisse ein (Einzelheiten finden Sie hier, hier ist die offizielle Einführung von Axios in China):

Da vuejs verwendet wird, ist die Datenanforderung für die Schnittstelle eine bequeme Verwaltung, die eine einheitliche Verwaltung erfordert. Wenn es in jeder Komponente platziert wird, ist dies für die zukünftige Wartung und Verwaltung unpraktisch. In der Datei reqwest.js ist eine Methode „uploadPhoto“ definiert, nämlich Parameter und zwei Rückruffunktionen Die erforderlichen Parameter des Bildes dienen dazu, die im Upload-Fortschritt enthaltenen Daten abzurufen, und der zweite Rückruf dient dazu, die vom Hintergrund zurückgegebenen Daten abzurufen, um den nächsten Schritt durchzuführen der Seitenbetrieb.

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

Verwenden Sie die Progress-Komponente in der Mint-UI-Komponente und definieren Sie die Variable in der Komponente zuvor. Die Variable ist vom Typ Zahl. Achten Sie beim Definieren darauf; > 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.

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

Gemäß der oben genannten Methode werden im Wesentlichen der Upload-Fortschritt und die prozentuale Anzeige des Bildes realisiert. Der Rest ist die Benutzeroberfläche, die entsprechend Ihrer eigenen Persönlichkeit angepasst werden kann, um Ihre perfekten Bedürfnisse zu erfüllen...

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3

So verwenden Sie Redux in React-Projekten (ausführliches Tutorial)

So erhöhen Sie den Wert in JavaScript automatisch

So verwenden Sie Swiper zum Implementieren der Paginierung

So verwenden Sie Bus in der Vue-Komponentenkommunikation

So implementieren Sie sensible Textaufforderungen in Angular

So implementieren Sie versteckte Anzeige in Angular

Das obige ist der detaillierte Inhalt vonSo verwenden Sie axios zum Hochladen von Bildern mit einer Fortschrittsbalkenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!