Wie bekomme ich onUploadProgress in Axios?

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

Derzeit sieht meine Post-Anfrage so aus:

export function uploadtoCdnAndSaveToDb(data) {
    return dispatch => {
        dispatch(showUnderLoader(true));
        return axios.post('/posttodb', {data:data},

        ).then((response) => {
            console.log(response.data)
        })
    }
}

Das Axios-Repository hat ein klares Beispiel dafür: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

Auszug aus der Webseite

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.

const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}

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

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.

siehe diesen Link mit einigen Maßstäbe.

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.