如何在 axios 中获取 onUploadProgress? [英] how to get onUploadProgress in axios?

问题描述

我对如何使用 axios 上传进度事件感到有些困惑.实际上我正在将大量文件存储到 aws s3 中.为此，如何获取上传进度?我需要这个函数 onUploadProgress

I'm little bit confused that how to upload progress event with axios. Actually I am storing huge number files into aws s3. For that, how to get uploaded progress? I need this function onUploadProgress

目前我的 Post 请求是这样的:

Currently my Post request is like this:

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

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

推荐答案

Axios 存储库有一个清晰的示例说明如何执行此操作:https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

The Axios repository has a clear example on how to do this: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

网站摘录

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

When you make a request with axios, you can pass in request config. Part of that request config is the function to call when upload progresses.

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

当你使用 axios 发出请求时，你可以传入这个配置对象.

When you make the request using axios, you can pass in this config object.

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

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

And this function will be called whenever the upload progress changes.

代码注释

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

I also noticed that you're not using ES6 to its fullest potential!

对象声明

对于这样的东西，它有一些很好的语法，例如，您定义了一个对象，如:{ data: data }，但是 { data } 就足够了.

It's got some nice syntax for stuff like this, for example, you have defined an object like: { data: data }, but { data } is sufficient.

可能值得使用带有一些 linting 规则的 linter，最常见的是 AirBnB 风格指南

It might be worth using a linter with some linting rules, with the most common being the AirBnB style guide

这篇关于如何在 axios 中获取 onUploadProgress?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！