如何在axios中获得onUploadProgress？

Question

我有点困惑,如何上传进展evt与axios.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发出请求时,您可以传入请求配置.该请求配置的一部分是上传进行时调用的功能.

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

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

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

每当上传进度发生变化时,都会调用此函数.

只需记下您的代码

我也注意到你没有充分发挥ES6的潜力!

对象声明

对于像这样的东西,它有一些很好的语法,例如,你已经定义了一个像这样的对象{ data: data },但是{ data }已经足够了.

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

Answer 2

只是想添加到以前的答案,一些具有特定配置的人可能会出现.

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

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

发生的事情是,在开发中通常前端和后端都在同一台机器上,并且发送数据包没有实时问题(即使对于大型文件,向dev后端发送数据也几乎是即时的)

诀窍和时间没有测量(因为这是后端工作)是数据传输到s3,然后你必须等待承诺解决但你不能跟踪这个进展,除非使用网络套接字等.

在大多数情况下,这不是生产环境中的问题,假设你在aws上,那么大部分时间用于将数据从用户发送到后端,而后端部分(即ec2)将数据发送到s3确实良好的上传速度,每10MB上传约0.3秒(对于法兰克福地区),因此与用户 - >后端数据传输相比,它可能是微不足道的.

看到这个链接与一些基准.

无论如何测试onUploadProgress实际上是多次被调用,正如您对大文件所期望的那样,只需在开发人员工具的网络选项卡中切换网络连接.