¿Cómo obtener onUploadProgress en axios?

Estoy un poco confundido sobre cómo cargar el evento de progreso con axios. En realidad, estoy almacenando una gran cantidad de archivos en aws s3. Para eso, ¿cómo obtener el progreso subido? necesito esta funcion onUploadProgress

Actualmente mi solicitud de publicación es así:

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

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

El repositorio de Axios tiene un claro ejemplo de cómo hacer esto: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

Extracto del sitio web

Cuando realiza una solicitud con axios, puede pasar la configuración de la solicitud. Parte de esa configuración de solicitud es la función para llamar cuando la carga progresa.

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

Cuando realiza la solicitud con axios, puede pasar este objeto de configuración.

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

Y esta función se llamará cada vez que cambie el progreso de carga.

Solo una nota en tu código

¡También noté que no estás usando ES6 en todo su potencial!

Declaración de objeto

Tiene una buena sintaxis para cosas como esta, por ejemplo, ha definido un objeto como: { data: data }pero { data } es suficiente.

Podría valer la pena usar un linter con algunas reglas de pelusa, siendo la más común la Guía de estilo de AirBnB

Solo quería agregar a la respuesta anterior a algunas personas que tienen una configuración específica.

Esto tiene que ver con el ‘problema’ de que puede resultar que onUploadProgress puede ser llamado sólo una o dos veces, generalmente una vez con el eventoprogreso.cargado === eventoprogreso.total

Entonces, si la devolución de llamada se llama al menos una vez, no hay nada malo con axios o medición, en realidad el valor es correcto. Puede llegar a este problema si, por ejemplo, está haciendo desarrollo y su backend es responsable de cargar datos, por ejemplo, cubeta aws s3

Lo que sucede allí es que, en el desarrollo, normalmente tanto el frontend como el backend están en la misma máquina y no hay problemas en tiempo real con el envío de paquetes (el envío de datos a su backend de desarrollo es casi instantáneo, incluso para archivos grandes)

El truco y donde no se mide el tiempo (porque este es un trabajo de back-end) es la transmisión de datos a s3, luego debe esperar a que se resuelva la promesa, pero no puede rastrear este progreso a menos que use sockets web o algo así.

La mayoría de las veces, este no es el problema en el entorno de producción, digamos que está en aws, luego la mayor parte del tiempo se dedica a enviar datos del usuario a su backend y la parte del backend (que es ec2) que envía datos a s3 tiene realmente buena velocidad de subida se trata 0,3 s por 10 MB subidos (para el área de Frankfurt) por lo que probablemente sea insignificante en comparación con el usuario -> transmisión de datos de back-end.

ver este enlace con algunos puntos de referencia.

De todos modos para probar eso onUploadProgress realmente se está llamando varias veces, como cabría esperar con archivos grandes, es simplemente cambiar la conexión de red en la pestaña de red de las herramientas de desarrollo.