comment obtenir onUploadProgress dans axios?
Je suis un peu confus quant à la façon de télécharger les progrès evt avec axios.En fait, je stocke un grand nombre de fichiers dans aws s3.Pour cela, comment obtenir les progrès téléchargés, j'ai besoin de cette fonction surUploadProgress
Actuellement, ma demande de publication est la suivante
export function uploadtoCdnAndSaveToDb(data) {
return dispatch => {
dispatch(showUnderLoader(true));
return axios.post('/posttodb',{data:data},
).then((response) => {
console.log(response.data)
})
}
}
Le référentiel Axios a un exemple clair sur la façon de procéder: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
Extrait du site Web
Lorsque vous faites une demande avec axios, vous pouvez passer dans la configuration de la demande. Une partie de cette configuration de demande est la fonction à appeler lorsque le téléchargement progresse.
const config = {
onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
Lorsque vous faites la demande en utilisant axios, vous pouvez passer cet objet de configuration.
axios.put('/upload/server', data, config)
Et cette fonction sera appelée chaque fois que la progression du téléchargement change.
Juste une note sur votre code
J'ai également remarqué que vous n'utilisez pas ES6 à son plein potentiel!
Déclaration d'objet
Il a une belle syntaxe pour des trucs comme ça, par exemple, vous avez défini un objet comme: { data: data }, mais { data } est suffisant.
Il pourrait être utile d'utiliser un linter avec quelques règles de peluchage, la plus courante étant le guide de style AirBnB
Je voulais juste ajouter à la réponse précédente certaines personnes ayant une configuration spécifique.
Cela a à voir avec le "problème" qu'il peut s'avérer que onUploadProgress ne peut être appelé qu'une ou deux fois, généralement une fois avec le progressEvent.loaded === progressEvent.total
Donc, si le rappel est appelé au moins une fois, il n'y a rien de mal avec axios ou la mesure, en fait la valeur est correcte. Vous pouvez arriver à ce problème si par exemple vous faites le développement et votre backend est responsable du téléchargement des données vers par exemple aws s3 bucket
Ce qui se passe là-dedans, c'est qu'en cours de développement, le frontend et le backend sont normalement sur la même machine et il n'y a pas de problème en temps réel avec l'envoi de paquets (l'envoi de données à votre backend de développement est presque instantané même pour les gros fichiers)
L'astuce et où le temps n'est pas mesuré (car c'est un travail de back-end) est la transmission de données vers s3, alors vous devez attendre que la promesse soit résolue, mais vous ne pouvez pas suivre cette progression à moins d'utiliser des sockets Web.
La plupart du temps, ce n'est pas le problème dans l'environnement de production, disons que vous êtes sur aws, alors la plupart du temps est consacré à l'envoi de données de l'utilisateur à votre backend et la partie backend (qui est ec2) l'envoi de données à s3 a vraiment bonne vitesse de téléchargement, il s'agit d'environ 0,3 s par 10 Mo téléchargés (pour la région de Francfort) , donc c'est probablement négligeable par rapport à l'utilisateur -> transmission de données backend.
voir ce lien avec quelques repères .
Quoi qu'il en soit, pour tester que onUploadProgress est vraiment appelé plusieurs fois comme vous pouvez vous y attendre avec des fichiers volumineux, il suffit de changer de connexion réseau dans l'onglet réseau des outils de développement.
