如何在 axios 中获取 onUploadProgress？

Posted 2023-02-19

【中文标题】如何在 axios 中获取 onUploadProgress？

【英文标题】：how to get onUploadProgress in axios?

【发布时间】：2017-04-26 13:28:40

【问题描述】：

我有点困惑如何使用 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)
        )
    

【问题讨论】：

在这种情况下查看我的评论。调用进度而不是 onUploadProgress ***.com/a/49647674/5830871

【参考方案1】：

Axios 存储库有一个关于如何执行此操作的明确示例：https://github.com/mzabriskie/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 style guide

【讨论】：

谢谢克里斯，我会遵守你的规则，是的，我是 es6 的新手。你的代码在上传的总字节数结束时打印，但我想要改变上传进度的数量

您上传的文件有多大？

5mb 到 1mb @chris

另外，如何取消中间的上传过程？

如果你正在处理多行，使用 ES6 你可以只做onUploadProgress(progressEvent) ...

【参考方案2】：

只是想补充以前的答案，一些具有特定配置的人可能会出现。

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

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

，您可能会遇到此问题

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

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

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

查看此链接和一些benchmarks。

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

【讨论】：

更多提示：使用Custom: Add... 输入 1mbs、8mbs 等...

要查看开发中的多个上传进度事件，请创建一个自定义网络限制配置文件以模拟以 50KB/s 的上传速度：Custom > Add... > Add custom profile... > Upload > 500。请注意，节流配置文件使用 kbit/s。所以 500 KB 实际上是 62.5 KB (500/8)。