Fortschrittsbalken für superagenten Datei-Upload

Question

Ich verwende die folgenden Codes zum Hochladen von Dateien. Die Datei wird im Blob-Format durch Superagenten gesendet, konvertiert sie in dataURI, wenn sie den Server erreicht, und speichert sie in AWS S3.

Datei-Upload funktioniert, aber der Fortschrittsbalken wird nicht korrekt ausgefüllt.

Gemäß dem Screenshot können Sie sehen, dass der Prozentsatz an Progress 100% sehr schnell laden beendet, sowohl auf Frontend und Backend in ein und demselben Server gehostet werden.

Der Upload-Vorgang wurde im Hintergrund fortgesetzt, aber die Richtung wurde von 14:14:08 Uhr bis 14:14:14 "Download" statt "Upload" und wurde mit einer Antwort abgeschlossen.

konnte ich nicht den Fortschritt auf „Gesamt - loaded“ berechnen auch, weil während der Fortschritt „Download“, die insgesamt ist 0.

Versuchte Superagent ersetzt mit axios und drücken Sie die gleiche Problem.

files.forEach((file) => { 
    const url = 'http://localhost:3030/uploads'; 
    const formData = new FormData(); 
    const config = { 
    headers: { 
     'content-type': 'multipart/form-data' 
    }, 
    onUploadProgress: e => { 
     console.log('Upload: ', e); 
    }, 
    onDownloadProgress: e => { 
     console.log('Download: ', e); 
    } 
    }; 
    formData.append('file', file); 
    axios.post(url, formData, config) 
    .then(res => console.log(res)) 
    .catch(err => console.log(err)); 
}); 

Wie könnte ich daraus einen Fortschrittsbalken erstellen? Kann ich daraus schließen, dass der "Upload" der Prozess des Hochladens auf den Server ist, während "Download" der Prozess des Hochladens auf AWS ist?

Answer 1

heute traf ich dieses Problem (so in diesem Thema Ich schreibe ...) Docs https://visionmedia.github.io/superagent/ sagt deutlich, dass

Ereignis Richtung ist: "upload" oder "Download"

also IMHO müssen Sie so etwas wie:

 if(event.direction === "upload") 
      console.log(e.direction,"is done",e.percent,"%")}) 

und es funktioniert kann hier() für Fortschrittsbalken so SetState. Es ist sehr dumm, aber gut. https://visionmedia.github.io/superagent/docs/test.html auch hier verwenden sie dies. Hat jemand eine bessere Idee dafür?