Barre de progression avec axios

J'ai pour afficher le statut de téléchargement le fichier à l'aide d'une Barre de Progression. Je suis à l'aide de axios effectuer des requêtes http. J'ai suivi l'exemple de leur github page 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'est pas de l'exécution de la console.log(progressEvent.loaded + ' ' + progressEvent.total); à tous elle ne remet this.updateProgressBarValue(progressEvent);

Comment puis-je résoudre ce problème??

Je suis nouveau dans le monde de javascript.

OriginalL'auteur Pritam Bohra | 2017-07-05

  1. 14

    Je pense que le problème est avec les "progrès" de l'événement lui-même, comme vous pouvez le lire dans Axios de configuration lui-même les progrès ne sont pas pris en charge. au lieu de cela vous devriez écouter onUploadProgress ou onDownloadProgress

    Un autre problème est l'obtention de la totalLength qui j'ai essayé de faire la manière suivante: regarder si lengthComputable, si ce n'est essayer et obtenir la longueur de l'en-tête, si ce n'est essayer et obtenir de l'décompressé le contenu de la longueur (en dernier recours), alors vous devriez être en mesure de faire ce que vous voulez avec la valeur.

    Ce n'est pas un imbécile preuve de la mise en œuvre! il échouera à chaque fois que le totalLength n'est pas disponible.

    Afin de le rendre un peu plus solide, vous pourriez mettre en œuvre "de faux" les progrès à l'aide de la méthode setInterval pour incrémenter le progrès manuellement à chaque seconde. Une fois la promesse est résolu, ensemble les progrès réalisés manuellement à 100%. si vous la mettre en œuvre en utilisant les transitions CSS, vous devriez obtenir une surface lisse solution, même si le progrès n'est pas toujours "bonne"

    J'ai fait une similaire chargeur (GitHub lien) 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 ));
                }
            });
    si vous avez un problème que onUploadProgress de rappel est exécutée qu'une seule fois découvrez cette réponse stackoverflow.com/a/48412965/2805357

    OriginalL'auteur Samuel Bergström

  2. 11

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

    OriginalL'auteur Pritam Bohra

  3. 1

    C'est très pratique de la bibliothèque pour la réalisation de ce sans trop de codage - https://github.com/rikmms/progress-bar-4-axios/

    OriginalL'auteur Sohail