我对如何使用 axios 上传进度事件感到有些困惑。实际上我正在将大量文件存储到 aws s3 中。为此，如何获取上传进度？我需要这个功能onUploadProgress
目前我的 Post 请求是这样的：
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 }已经足够了。
可能值得使用带有一些 linting 规则的linter，最常见的是AirBnB 风格指南
只是想补充一些具有特定配置的人可能会想到的先前答案。
这与“问题”有关，可能结果是onUploadProgress可能只被调用一次或两次，通常一次是使用progressEvent.loaded === progressEvent.total
所以如果回调至少被调用一次，axios 或测量没有任何问题，实际上值是正确的。例如，如果您正在进行开发并且您的后端负责将数据上传到例如aws s3 存储桶，则您可能会遇到此问题
发生的情况是，在开发中，前端和后端通常在同一台机器上，并且发送数据包没有实时问题（即使对于大文件，将数据发送到开发后端几乎是即时的）
诀窍和不测量时间的地方（因为这是后端工作）是将数据传输到 s3，然后您必须等待Promise解决，但除非使用 Web 套接字等，否则您无法跟踪此进度。
大多数情况下，这不是生产环境中的问题，假设您在 aws 上，那么大部分时间都花在从用户向后端发送数据上，而后端部分（即 ec2）向 s3 发送数据确实良好的上传速度每 10MB 上传大约0.3秒（对于法兰克福地区），因此与用户 -> 后端数据传输相比，它可能可以忽略不计。
请参阅此链接与一些基准测试。
无论如何，要测试onUploadProgress是否真的像您对大文件所期望的那样被多次调用，只需在开发人员工具的网络选项卡中切换网络连接即可。
