プログレスバーは、私はファイルをアップロードするには、次のコードを使用しています

Question

をアップロードします。ファイルはblob形式のスーパーエージェント経由で送信され、サーバに到達するとdataURIに変換され、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); 
    }); 
}); 

ファイルアップロードは機能しますが、進行状況バーには正しく入力されません。スクリーンショットを1として

、あなたはによってProgressEventの割合をアップロードすることが確認でき、同じサーバーでホストされているフロントエンドとバックエンドの両方のために、100％、で非常に高速に終わりました。

アップロードの進捗

はバックグラウンドで続けたが、方向は、代わりに14時14分08秒から午後2時14分14秒に「アップロード」の「ダウンロード」と応答して完成となりました。進捗状況を「ダウンロード」の間にあるため、あまりにも、合計が0

がaxiosでたSuperAgentを交換しようとしたと同じにヒット -

私は「ロード合計」に基づいて進捗状況を計算することができませんでした問題。

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)); 
}); 

どのようにしてプログレスバーを作成できますか？私は、「ダウンロード」をAWSにアップロードするプロセスである一方で、サーバーにアップロードするプロセスである「アップロード」と結論することはできますか？

Answer 1

今日は私が（...ので、私はこのトピックに書いている）、この問題を満たし ドキュメントhttps://visionmedia.github.io/superagent/明確

イベントが方向であることを、こう述べています。「アップロード」または

「をダウンロードしてください」

だから私見あなたのような何かをする必要があります：

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

を、それはので、ここでプログレスバーのために）（SETSTATEことができます動作します。 これは非常にダミーですが、うまくいきます。 https://visionmedia.github.io/superagent/docs/test.htmlまた、ここで彼らはこれを使用しています。 誰かがこれについて良いアイデアを持っていますか？