web-dev-qa-db-fra.com

Barre de progression avec axios

Je dois afficher l'état de téléchargement du fichier à l'aide d'une barre de progression. J'utilise axios pour faire des requêtes http. J'ai suivi l'exemple de leur page github https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

Mon code ressemble à ceci:

this.store().then(() => {
    var form = new FormData();
        form.append('video', this.file);
        form.append('uid', this.uid);

        axios.post('/upload', form, {
            progress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       console.log(progressEvent.loaded + ' ' + progressEvent.total);
                       this.updateProgressBarValue(progressEvent);
                    }
           }
       })                   
});

Cependant, il n’exécute pas du tout la fonction console.log(progressEvent.loaded + ' ' + progressEvent.total); et n’appelle pas this.updateProgressBarValue(progressEvent);

Comment puis-je résoudre ça??

Je suis nouveau dans le monde du javascript.

javascriptprogress-barvuejs2axios
16
Pritam Bohra

J'ai trouvé la réponse. Le nom de l'événement est onUploadProgress et j'utilisais progress

13
Pritam Bohra

Je pense que le problème est avec l'événement "progress" lui-même, comme vous pouvez le lire dans configuration Axios la progression elle-même n'est pas prise en charge. vous devriez plutôt écouter onUploadProgress ou onDownloadProgress

Un autre problème est d'obtenir la longueur totale que j'ai essayé de faire de la manière suivante: regardez si lengthComputable, sinon essayez d'obtenir la longueur de l'en-tête, sinon essayez d'obtenir la longueur du contenu décompressé (en dernier recours), vous devriez pouvoir le faire tout ce que vous voulez avec la valeur.

Ce n'est pas une implémentation infaillible! il échouera si totalLength n'est pas disponible.

Afin de le rendre un peu plus solide, vous pouvez implémenter une progression "fictive" en utilisant setInterval pour incrémenter la progression manuellement toutes les secondes. Une fois la promesse résolue, définissez la progression manuellement sur 100%. si vous l'implémentez en utilisant des transitions CSS, vous devriez obtenir une solution fluide même si la progression n'est pas toujours "correcte"

J'ai fait un chargeur similaire ( lien GitHub ) si vous avez besoin de plus de code.

                onUploadProgress: (progressEvent) => {
                const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length');
                console.log("onUploadProgress", totalLength);
                if (totalLength !== null) {
                    this.updateProgressBarValue(Math.round( (progressEvent.loaded * 100) / totalLength ));
                }
            });
17
Samuel Bergström

Ceci est une bibliothèque très pratique pour réaliser ceci sans trop de codage - https://github.com/rikmms/progress-bar-4-axios/

1
Sohail