wie man onUploadProgress in der axios?

Bin ich etwas verwirrt, dass, wie Sie upload-Fortschritt evt mit axios.Eigentlich bin ich die Speicherung von großen Anzahl von Dateien in aws s3.Für die, die how to get hochgeladen Fortschritte, brauche ich diese Funktion onUploadProgress

Derzeit meine Post-Anfrage ist wie folgt

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

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

Siehe mein Kommentar in diesem Fall. rufen Sie Fortschritt statt onUploadProgress stackoverflow.com/a/49647674/5830871

InformationsquelleAutor Nane | 2016-12-11

32

Den Axios-repository ist ein klares Beispiel dafür, wie dies zu tun: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

Auszug aus der Website

Wenn Sie eine Anfrage mit axios, die Sie übergeben können, verlangen config. Teil des Antrags config ist die Funktion, die aufgerufen werden, wenn upload fortschreitet.
```
const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
```
Wenn Sie die Anforderung mit axios, die Sie übergeben können, in diesem config-Objekt.
```
axios.put('/upload/server', data, config)
```
Und diese Funktion wird aufgerufen, wenn der upload-Fortschritt verpasst.

Nur ein Hinweis auf Ihren code

Mir ist auch aufgefallen, dass Sie nicht mit ES6 sein volles potential entfalten!

Object-Deklaration

Es hat einige nette syntax für Sachen wie diese, zum Beispiel, haben Sie definiert ein Objekt wie: { data: data }, aber { data } ist ausreichend.

Könnte es sich lohnen, mit einem linter mit einigen linting Regeln, mit der die meisten gemeinsamen wird die Style guide-AirBnB

Thx chris werde ich deins Regeln ja ich bin neu in es6.Und der code ist der Druck am Ende der Gesamtanzahl der bytes, die hochgeladen aber ich will das ändern Anzahl der Upload-Fortschritt
Wie groß ist die Datei, die Sie hochladen?
5mb auf 1mb @chris
Auch wie kann ich das rückgängig machen der upload-Prozess in zwischen?
Wenn Sie den Umgang mit mehreren Leitungen, mit ES6 können Sie nur onUploadProgress(progressEvent) { ... }

InformationsquelleAutor christopher
9

Wollte nur hinzufügen, auf Vorherige Antwort einige Leute haben bestimmte Konfiguration kann kommen auf.

Dies hat zu tun mit dem 'problem' , es kann sich herausstellen, dass onUploadProgress kann nur aufgerufen werden, einmal oder zweimal, in der Regel einmal mit der progressEvent.geladen === progressEvent.insgesamt

So, wenn der callback aufgerufen wird, ist mindestens einmal, es ist nichts falsch mit axios oder Messung, tatsächlich ist der Wert korrekt ist. Sie wird kommen, an dieses problem auf, wenn zum Beispiel Sie tun Entwicklung und Ihre backend ist verantwortlich für das hochladen von Daten, zum Beispiel aws s3 bucket

Was dort passiert ist, ist, dass in der Entwicklung normalerweise sowohl frontend und backend auf demselben Rechner und es gibt keine Echtzeit-Problem mit dem senden von Paketen (senden von Daten an das dev-backend ist fast instant, selbst bei großen Dateien)

Den trick und wo die Zeit nicht gemessen (weil das ist backends job) ist die Datenübertragung auf s3, dann müssen Sie warten, bis die Versprechen zu lösen, aber Sie können Sie nicht verfolgen diese fortschreitet, es sei denn, die Verwendung von web sockets oder so.

Meisten der Zeit ist dies nicht das problem in der Produktion env, sagen wir, Sie sind auf der aws-Plattform, dann die meiste Zeit damit verbracht wird, das senden von Daten vom Benutzer, um Ihre back-End-und backend-Teil (die ec2) senden von Daten zu s3 hat wirklich gute upload-Geschwindigkeit, es ist etwa 0,3 s pro 10 MB hochgeladen (Raum Frankfurt) so ist es wohl vernachlässigbar im Vergleich zu Benutzer -> back-End-Daten-übertragung.

finden Sie unter diesem link mit einigen benchmarks.

Sowieso um zu testen, ob onUploadProgress ist wirklich mehrfach aufgerufen wird, als man erwarten würde, mit großen Dateien, einfach zu wechseln Netzwerkverbindung im Netzwerk-tab der developer-tools.

InformationsquelleAutor djra

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.