Barre de progression pour le téléchargement de super-agent

Question

J'utilise les codes suivants pour télécharger des fichiers. Le fichier sera envoyé via superagent au format blob, le convertira en dataURI lorsqu'il atteindra le serveur et sauvegardera dans AWS S3.

files.forEach((file) => { 
    superagent.post('http://localhost:3030/uploads') 
    .attach('file', file) 
    .on('progress', e => { 
    console.log('Percentage done: ', e); 
    }) 
    .end((err, res) => { 
    // console.log(err); 
    console.log(res); 
    }); 
}); 

Le chargement de fichier fonctionne mais la barre de progression n'est pas remplie correctement.

Selon la capture d'écran, vous pouvez voir que le pourcentage télécharger ProgressEvent a pris fin très rapidement à 100%, en raison à la fois frontend et backend hébergé dans un même serveur.

La progression du téléchargement a continué en arrière-plan, mais la direction est devenu « télécharger » au lieu de « télécharger » de 14:14:08 à 14:14:14 et complété par une réponse.

Je ne pouvais pas calculer les progrès en fonction de « total - chargé » aussi, parce que pendant le « télécharger » le progrès, le total est 0.

essayé de remplacer superagent avec Axios et a frappé le même problème.

files.forEach((file) => { 
    const url = 'http://localhost:3030/uploads'; 
    const formData = new FormData(); 
    const config = { 
    headers: { 
     'content-type': 'multipart/form-data' 
    }, 
    onUploadProgress: e => { 
     console.log('Upload: ', e); 
    }, 
    onDownloadProgress: e => { 
     console.log('Download: ', e); 
    } 
    }; 
    formData.append('file', file); 
    axios.post(url, formData, config) 
    .then(res => console.log(res)) 
    .catch(err => console.log(err)); 
}); 

Comment pourrais-je construire une barre de progression? Puis-je conclure que le «téléchargement» est le processus de téléchargement sur le serveur, alors que «télécharger» est le processus de téléchargement vers AWS?

Answer 1

aujourd'hui j'ai rencontré ce problème (donc je suis en train d'écrire dans ce sujet ...) Docs https://visionmedia.github.io/superagent/ dit clairement que

événement est

direction: "upload" ou "télécharger"

donc à mon humble avis, vous devez faire quelque chose comme:

 if(event.direction === "upload") 
      console.log(e.direction,"is done",e.percent,"%")}) 

et il fonctionne donc peut setstate() pour la barre de progression ici. C'est très factice, mais bon. https://visionmedia.github.io/superagent/docs/test.html ici aussi ils l'utilisent. Est-ce que quelqu'un a une meilleure idée pour cela?