Ich bin etwas verwirrt, wie man Fortschrittsereignisse mit Axios hochlädt. Tatsächlich speichere ich eine große Anzahl von Dateien in aws s3. Wie bekomme ich dafür hochgeladenen Fortschritt? Ich brauche diese Funktion onUploadProgress
Wenn Sie eine Anfrage mit Axios stellen, können Sie die Anfragekonfiguration übergeben. Ein Teil dieser Anforderungskonfiguration ist die Funktion, die aufgerufen wird, wenn der Upload fortschreitet.
Wenn Sie die Anfrage mit Axios stellen, können Sie dieses Konfigurationsobjekt übergeben.
axios.put('/upload/server', data, config)
Und diese Funktion wird immer dann aufgerufen, wenn sich der Upload-Fortschritt ändert.
Nur eine Anmerkung zu deinem Code
Mir ist auch aufgefallen, dass Sie ES6 nicht in vollem Umfang nutzen!
Objektdeklaration
Es hat eine nette Syntax für solche Sachen, zum Beispiel haben Sie ein Objekt wie folgt definiert: { data: data }sondern { data } ist ausreichend.
Es könnte sich lohnen, einen Linter mit einigen Linting-Regeln zu verwenden, wobei die gebräuchlichste die ist AirBnB-Styleguide
Thx Chris, ich werde deinen Regeln folgen, ja, ich bin neu bei es6. Und dein Code wird am Ende der gesamten hochgeladenen Bytes gedruckt, aber ich möchte die sich ändernde Anzahl des Upload-Fortschritts
– Nö
11. Dezember 2016 um 16:18 Uhr
Wie groß ist die Datei, die Sie hochladen?
– Christoph
11. Dezember 2016 um 16:21 Uhr
5 MB bis 1 MB @chris
– Nö
11. Dezember 2016 um 17:04 Uhr
Und wie kann ich den Upload-Vorgang zwischendurch abbrechen?
– Arun Mohan
17. November 2017 um 11:37 Uhr
Wenn Sie es mit mehreren Zeilen zu tun haben, können Sie mit ES6 einfach tun onUploadProgress(progressEvent) { ... }
– Edward Anthony
24. September 2018 um 18:28 Uhr
Ich wollte nur die vorherige Antwort ergänzen, auf die einige Leute mit einer bestimmten Konfiguration stoßen könnten.
Das hat mit dem ‘Problem’ zu tun, dass sich das herausstellen kann onUploadProgress darf nur ein- oder zweimal angerufen werden, meist einmal mit der progressEvent.loaded === progressEvent.total
Wenn also der Callback mindestens einmal aufgerufen wird, ist an Axios oder Measurement nichts auszusetzen, eigentlich stimmt der Wert. Sie können zu diesem Problem kommen, wenn Sie dies beispielsweise tun Entwicklung und Ihr Backend ist beispielsweise für das Hochladen von Daten verantwortlich aws s3-Bucket
Was dort passiert, ist, dass sich in der Entwicklung normalerweise sowohl Frontend als auch Backend auf demselben Computer befinden und es kein Echtzeitproblem beim Senden von Paketen gibt (das Senden von Daten an Ihr Entwicklungs-Backend erfolgt fast sofort, selbst bei großen Dateien).
Der Trick, bei dem die Zeit nicht gemessen wird (weil dies ein Backend-Job ist), ist die Datenübertragung an s3, dann müssen Sie warten, bis das Versprechen aufgelöst wird, aber Sie können diesen Fortschritt nicht verfolgen, es sei denn, Sie verwenden Web-Sockets oder so.
Meistens ist dies nicht das Problem in der Produktionsumgebung, sagen wir, Sie sind auf aws, dann wird die meiste Zeit damit verbracht, Daten vom Benutzer an Ihr Backend zu senden, und der Backend-Teil (der ec2 ist), der Daten an s3 sendet, hat wirklich gute Upload-Geschwindigkeit, um die es geht 0,3s pro 10MB Upload (für Raum Frankfurt) Daher ist es im Vergleich zur Benutzer-> Backend-Datenübertragung wahrscheinlich vernachlässigbar.
Jedenfalls um das zu testen onUploadProgress tatsächlich mehrmals aufgerufen wird, wie Sie es bei großen Dateien erwarten würden, ist einfach, die Netzwerkverbindung im Netzwerk-Tab der Entwicklertools zu wechseln.
Noch mehr Protip: Verwenden Sie das Custom: Add... um 1mbs, 8mbs usw. einzugeben …
– airtonix
11. August 2020 um 7:34 Uhr
Um mehrere Upload-Fortschrittsereignisse in der Entwicklung anzuzeigen, erstellen Sie ein benutzerdefiniertes Netzwerkdrosselungsprofil, das das Hochladen mit 50 KB/s simuliert: Custom > Add... > Add custom profile... > Upload > 500. Beachten Sie, dass das Drosselungsprofil kbit/s verwendet. 500 Kilobit sind also eigentlich 62,5 Kilobyte (500/8).
– John Kary
12. Dezember 2021 um 21:36 Uhr
Wenn ich also eine sehr schwere Arbeit auf der BE-Seite habe, nachdem die Datei hochgeladen wurde, kann ich diesen Hook nicht verwenden, um den Fortschritt zu verfolgen, richtig? Dieser Haken ist nur zu wissen, ob die Datei vollständig auf die BE hochgeladen ist und die andere Aufgabe nicht gezählt wird, habe ich recht?
– vicnoob
17. Oktober 2022 um 4:17 Uhr
14386000cookie-checkWie bekomme ich onUploadProgress in Axios?yes
Siehe meinen Kommentar in diesem Fall. Rufen Sie progress anstelle von onUploadProgress auf: stackoverflow.com/a/49647674/5830871
– Tuan Nguyen
4. April 2018 um 10:21 Uhr