如何在axios中获取onUploadProgress?
how to get onUploadProgress in axios?
我有点困惑如何使用 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发起请求时,可以传入request config。该请求配置的一部分是上传进行时调用的函数。
const config = {
onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
当你使用axios发起请求时,你可以传入这个config对象。
axios.put('/upload/server', data, config)
并且上传进度变化时会调用该函数
请注意您的代码
我还注意到您没有充分发挥 ES6 的潜力!
对象声明
对于像这样的东西,它有一些很好的语法,例如,你定义了一个像这样的对象:{ data: data }
,但是 { data }
就足够了。
可能值得使用带有一些 linting 规则的 linter,最常见的是 AirBnB style guide
只是想补充一下之前的答案,一些具有特定配置的人可能会加入。
这与 'problem' 有关,可能会发现 onUploadProgress 可能只被调用一次或两次,通常是 progressEvent.loaded === progressEvent.total
因此,如果回调至少被调用一次,则 axios 或测量没有任何问题,实际上该值是正确的。例如,如果您正在进行 development 并且您的后端负责将数据上传到 aws s3 bucket[=12,则您可能会遇到此问题=]
发生的情况是,在开发中,通常前端和后端都在同一台机器上,并且发送数据包没有实时问题(即使对于大文件,向您的开发后端发送数据几乎是即时的)
技巧和未测量时间的地方(因为这是后端工作)是数据传输到 s3,然后你必须等待承诺解决,但除非使用网络套接字或所以。
大多数时候这不是生产环境的问题,假设你在 aws 上,那么大部分时间都花在从用户发送数据到你的后端和后端部分(即 ec2)发送到 s3 的数据上传速度非常快,大约 0.3s 每 10MB 上传(法兰克福地区) 所以与用户 -> 后端数据传输相比它可能可以忽略不计。
看到这个 link 和一些 benchmarks。
无论如何,要测试 onUploadProgress 是否真的像您预期的那样被多次调用大文件,只需在开发人员工具的网络选项卡中切换网络连接即可。
我有点困惑如何使用 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发起请求时,可以传入request config。该请求配置的一部分是上传进行时调用的函数。
const config = {
onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}
当你使用axios发起请求时,你可以传入这个config对象。
axios.put('/upload/server', data, config)
并且上传进度变化时会调用该函数
请注意您的代码
我还注意到您没有充分发挥 ES6 的潜力!
对象声明
对于像这样的东西,它有一些很好的语法,例如,你定义了一个像这样的对象:{ data: data }
,但是 { data }
就足够了。
可能值得使用带有一些 linting 规则的 linter,最常见的是 AirBnB style guide
只是想补充一下之前的答案,一些具有特定配置的人可能会加入。
这与 'problem' 有关,可能会发现 onUploadProgress 可能只被调用一次或两次,通常是 progressEvent.loaded === progressEvent.total
因此,如果回调至少被调用一次,则 axios 或测量没有任何问题,实际上该值是正确的。例如,如果您正在进行 development 并且您的后端负责将数据上传到 aws s3 bucket[=12,则您可能会遇到此问题=]
发生的情况是,在开发中,通常前端和后端都在同一台机器上,并且发送数据包没有实时问题(即使对于大文件,向您的开发后端发送数据几乎是即时的)
技巧和未测量时间的地方(因为这是后端工作)是数据传输到 s3,然后你必须等待承诺解决,但除非使用网络套接字或所以。
大多数时候这不是生产环境的问题,假设你在 aws 上,那么大部分时间都花在从用户发送数据到你的后端和后端部分(即 ec2)发送到 s3 的数据上传速度非常快,大约 0.3s 每 10MB 上传(法兰克福地区) 所以与用户 -> 后端数据传输相比它可能可以忽略不计。
看到这个 link 和一些 benchmarks。
无论如何,要测试 onUploadProgress 是否真的像您预期的那样被多次调用大文件,只需在开发人员工具的网络选项卡中切换网络连接即可。