Javascript 如何在axios中获得onUploadProgress？

对于如何使用axios上传进度事件，我有点困惑。实际上，我正在将大量文件存储到AWSS3中。为此，如何获得上传进度？我需要这个函数

onUploadProgress

目前我的发帖请求如下：

export function uploadtoCdnAndSaveToDb(data) {
    return dispatch => {
        dispatch(showUnderLoader(true));
        return axios.post('/posttodb', {data:data},

        ).then((response) => {
            console.log(response.data)
        })
    }
}

---

Axios存储库中有一个关于如何执行此操作的清晰示例：

网站摘录

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

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

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

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

每当上传进度发生变化时，就会调用此函数

只需在代码上做一个注释

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

对象声明

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

{data:data}

，但是

{data}

就足够了

---

可能值得使用一个带有一些过梁规则的过梁，最常见的是

只是想在前面的答案的基础上添加一些具有特定配置的人可能会遇到的问题

这与“问题”有关，即onUploadProgress只能调用一次或两次，通常一次调用progressEvent.loaded==progressEvent.total

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

在开发过程中，前端和后端通常都在同一台机器上，发送数据包时没有实时性问题（即使对于大型文件，向开发人员后端发送数据也几乎是即时的）

诀窍是，在没有测量时间的地方（因为这是后端工作），是将数据传输到s3，然后您必须等待承诺解决，但除非使用web套接字之类的工具，否则无法跟踪这一过程

大多数情况下，这在production env中不是问题所在，假设您在aws上，那么大部分时间都用于将数据从用户发送到后端，而后端部分（即ec2）将数据发送到s3的上传速度非常快，大约为每10MB上传0.3s（对于法兰克福地区）因此，与用户->后端数据传输相比，它可能可以忽略不计

请参阅此链接并提供一些信息

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

---

Thx chris我将遵守您的规则是的，我是es6新手。您的代码将在上载的总字节数末尾打印，但我想知道上载进程的变化数量您正在上载的文件有多大？从5mb到1mb@chrisAlso我如何取消其间的上载过程？如果您处理的是多行，使用ES6，您只需执行

onUploadProgress（progressEvent）{…}

查看本例中的注释即可。调用progress而不是onUploadProgress甚至更多protip：使用

自定义：添加…

来输入1MB、8MB等。。。