如何在axios中获取onUploadProgress？

Question

我对如何使用 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)
        })
    }
}

Answer 1

Axios 存储库有一个关于如何执行此操作的清晰示例：https://github.com/axios/axios/blob/master/examples/upload/index.html

摘自网站

用axios发起请求时，可以传入请求配置。该请求配置的一部分是上传进度时调用的函数。

const config = {
    onUploadProgress: progressEvent => console.log(progressEvent.loaded)
}

使用axios发起请求时，可以传入这个config对象。

axios.put('/upload/server', data, config)

并且每当上传进度发生变化时都会调用此函数。

只需在您的代码上注明

我还注意到你没有充分利用 ES6 的潜力！

对象声明

对于这样的东西，它有一些很好的语法，例如，您定义了一个像这样的对象：

{ data: data }

，但是

{ data }

就足够了。

可能值得使用具有一些 linting 规则的 linter，最常见的是 AirBnB 样式指南

Answer 2

只是想补充之前的答案，一些具有特定配置的人可能会遇到。

这与“问题”有关，可能会发现 onUploadProgress 可能只被调用一次或两次，通常使用 progressEvent.loaded === ProgressEvent.total

调用一次

因此，如果回调至少被调用一次，则 axios 或测量没有任何问题，实际上该值是正确的。例如，如果您正在进行开发并且您的后端负责将数据上传到例如aws s3存储桶

，您可能会遇到此问题

发生的情况是，在开发过程中，通常前端和后端都在同一台机器上，并且发送数据包不存在实时问题（即使对于大文件，将数据发送到开发后端也几乎是即时的）

技巧和不测量时间的地方（因为这是后端工作）是将数据传输到 s3，然后你必须等待承诺解决，但除非使用 Web 套接字等，否则你无法跟踪此进度。

大多数情况下，这不是生产环境中的问题，假设您在 aws 上，那么大部分时间都花在将数据从用户发送到后端，而后端部分（即 ec2）将数据发送到 s3上传速度非常快，大约每 10MB 上传 0.3 秒（法兰克福地区），因此与用户 -> 后端数据传输相比，它可能可以忽略不计。 请参阅此链接以及一些

基准

。 无论如何，要测试

onUploadProgress

是否确实被多次调用（正如您对大文件所期望的那样），只需在开发人员工具的网络选项卡中切换网络连接即可。