如何在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)
        })
    }
}

- Nane

---

在这种情况下，请查看我的评论。调用progress而不是onUploadProgress。https://dev59.com/XKbja4cB1Zd3GeqPZgH9#49647674 - Tuan Nguyen

Answer 1

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风格指南

- christopher

---

谢谢Chris，我会遵守你的规则。是的，我是ES6的新手。你的代码在上传总字节数的末尾打印，但我想要上传进度的变化数字。 - Nane

还有，我如何在上传过程中取消上传？ - Arun Mohan

如果你正在处理多行代码，使用 ES6 你可以直接这样写：onUploadProgress(progressEvent) { ... }。 - Edward Anthony

跟踪上传进度似乎只支持浏览器。您有没有关于在服务器上跟踪上传/下载进度的建议？谢谢。 - Crashalot

嗨@christoper，我们如何在此请求中传递auth头和数据以及配置？我已经在其他用户请求中添加了auth头，但对于这种类型的请求，我无法传递任何auth头。请给我一些建议。 - Ravi Sharma

Answer 2

只是想补充之前的回答，一些人可能会遇到特定配置问题。

这与 '问题' 有关，即 onUploadProgress 可能仅被调用一次或两次，通常仅一次，带有 progressEvent.loaded === progressEvent.total

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

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

技巧在于时间没有被计算（因为这是后端的工作），而是传输到 s3 的数据，然后您必须等待承诺解决，但是除非使用 web sockets 等，否则无法跟踪此进度。

在生产环境中，大多数情况下，这不是问题，假设您正在使用 aws，则大部分时间都花费在从用户发送数据到您的后端，而后端部分（即 ec2）将数据发送到 s3 具有非常好的上传速度，大约为 0.3 秒每上传 10MB（针对法兰克福地区），因此与用户->后端数据传输相比可能是可以忽略不计的。

请参见此链接，其中包含一些基准测试。

无论如何，要测试 onUploadProgress 是否按您预期多次被调用以处理大文件，只需在开发者工具的网络选项卡中切换网络连接即可。

- djra

---

更多专业提示：使用“自定义：添加...”来输入1mbs、8mbs等。 - airtonix

为了在开发中查看多个上传进度事件，请创建一个自定义的网络限速配置文件，模拟以50KB/s上传：自定义 > 添加... > 添加自定义配置文件... > 上传 > 500。请注意，限速配置文件使用的是 kbit/s。因此，500千位元每秒实际上是62.5千字节（500/8）。 - John Kary

那么，如果文件上传后BE端有很重的工作量，我就不能使用这个钩子来跟踪进度了对吧？这个钩子只是用来知道文件是否完全上传到BE，而其他任务不会被计算，我说的对吗？ - vicnoob