如何在axios中获得onUploadProgress？

Question

我有点困惑，如何使用axios上传进度evt.Actually我将大量文件存储到aws s3。为了如何获得上传的进度我需要这个函数onUploadProgress

目前我的帖子请求是这样的

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/mzabriskie/axios/blob/master/examples/upload/index.html

摘自网站

当您使用axios发出请求时，您可以传入请求配置。该请求配置的一部分是上传过程中要调用的函数。

%%

使用axios发出请求时，可以传入此配置对象。

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

只要上传进度发生变化，就会调用此函数。

只需记下您的代码

我还注意到你没有充分发挥ES6的潜力！

对象声明

对于这样的东西，它有一些很好的语法，例如，你已经定义了一个像axios.put('/upload/server', data, config) 这样的对象，但是{ data: data }就足够了。

使用带有一些linting规则的linter可能是值得的，最常见的是AirBnB style guide

Answer 2

只想添加一些具有特定配置的人可以加入以前的答案。

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

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

，则可能会遇到此问题

在开发过程中通常情况下，前端和后端都在同一台机器上，并且发送数据包没有实时问题（即使对于大型文件，也几乎可以立即向您的dev后端发送数据）

技巧和时间没有被测量（因为这是后端工作）是数据传输到s3，然后你必须等待承诺解决但你不能跟踪这个进展，除非使用网络套接字等。

大多数情况下，这不是生产环境中的问题，假设您在aws上，那么大部分时间都花在从用户向后端发送数据以及后端部分（即ec2）发送数据到s3具有非常好的上传速度，大约 0.3s每10MB上传（对于法兰克福地区）所以它可能与用户相比可忽略不计 - ＆gt;后端数据传输。

与某些benchmarks一起查看此链接。

无论如何要测试 onUploadProgress 是否真的被多次调用，就像在大型文件中所期望的那样，只需在开发人员工具的网络选项卡中切换网络连接。