axiosでonUploadProgressを取得する方法は？
私はaxiosで進捗状況をアップロードする方法について少し混乱していますが、実際には、aws s3に膨大な数のファイルを保存しています。
現在、私の投稿リクエストは次のようなものです
export function uploadtoCdnAndSaveToDb(data) {
return dispatch => {
dispatch(showUnderLoader(true));
return axios.post('/posttodb',{data:data},
).then((response) => {
console.log(response.data)
})
}
}
Axiosリポジトリには、これを行う方法に関する明確な例があります。 https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
ウェブサイトからの抜粋
Axiosでリクエストを行うとき、リクエスト設定を渡すことができます。そのリクエスト設定の一部は、アップロードの進行時に呼び出す関数です。
const config = {
onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
Axiosを使用してリクエストを行うとき、この設定オブジェクトを渡すことができます。
axios.put('/upload/server', data, config)
そして、この関数は、アップロードの進行状況が変わるたびに呼び出されます。
コードに注意してください
また、ES6を最大限に活用していないことに気付きました！
オブジェクト宣言
このようなものにはいくつかの素敵な構文があります。たとえば、次のようなオブジェクトを定義しています：{ data: data }、ただし{ data } 十分なものです。
最も一般的なのは AirBnBスタイルガイド であるリントルールでリンターを使用する価値があるかもしれません
前の回答に追加したかったのは、特定の構成を持っている人が出てくるかもしれないということです。
これは、onUploadProgressが1回または2回だけ呼び出されることが判明する可能性があるという「問題」に関係しています。通常はprogressEvent.loaded === progressEvent.total
したがって、コールバックが少なくとも1回呼び出されている場合、axiosまたは測定に問題はありません。実際には値は正しいです。たとえば、developmentを実行していて、たとえばaws s3バケット
ここで起こることは、開発では通常フロントエンドとバックエンドの両方が同じマシン上にあり、パケットの送信にリアルタイムの問題がないことです（開発ファイルのバックエンドへのデータ送信は、大きなファイルであってもほとんど瞬時です）
（これがバックエンドジョブであるため）時間を測定しないトリックは、s3へのデータ送信です。その後、約束が解決するのを待つ必要がありますが、Webソケットなどを使用しない限り、この進捗を追跡できません。
ほとんどの場合、これは本番環境の問題ではありません。たとえば、awsを使用している場合、ほとんどの時間はユーザーからバックエンドにデータを送信するのに費やされ、s3にデータを送信するバックエンド部分（ec2）は本当に良好なアップロード速度は、アップロードされた10MBあたり約0.3秒です（フランクフルトエリアの場合）。したがって、ユーザー->バックエンドデータ送信と比較すると、おそらく無視できる程度です。
いくつかの ベンチマーク でこのリンクを参照してください。
とにかくonUploadProgressが実際に複数回呼び出されることをテストするには、開発者ツールの[ネットワーク]タブでネットワーク接続を切り替えるだけです。
