Cómo controlar el progreso de subida y descarga en Axios
¿Qué son y cómo funcionan onUploadProgress y onDownloadProgress?
-
onUploadProgress: Permite monitorear el progreso de la subida de datos al servidor (por ejemplo, cuando envías archivos a través de una solicitudPOSToPUT). -
onDownloadProgress: Permite monitorear el progreso de la descarga de datos desde el servidor (por ejemplo, cuando descargas archivos grandes o recibes respuestas largas).
Ambas funciones reciben un evento con información sobre el progreso, incluyendo la cantidad de datos cargados o descargados y el total, lo que te permite calcular el porcentaje de completado.
Ejemplo básico de uso de onUploadProgress
Este ejemplo muestra cómo usar onUploadProgress para rastrear la subida de un archivo:
const axios = require('axios');
const formData = new FormData();
formData.append('archivo', archivoInput.files[0]); // Añade el archivo desde un input de HTML
axios.post('https://api.ejemplo.com/subir', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function (progressEvent) {
const porcentaje = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`Progreso de subida: ${porcentaje}%`);
}
})
.then(response => {
console.log('Archivo subido exitosamente:', response.data);
})
.catch(error => {
console.error('Error al subir el archivo:', error);
});
En este ejemplo, onUploadProgress rastrea cuánto del archivo se ha subido en relación con el total, y el porcentaje de progreso se imprime en la consola.
Ejemplo básico de uso de onDownloadProgress
Este ejemplo muestra cómo usar onDownloadProgress para monitorear el progreso de la descarga de un archivo:
axios.get('https://api.ejemplo.com/descargarArchivo', {
responseType: 'blob', // Para manejar archivos como blobs
onDownloadProgress: function (progressEvent) {
const porcentaje = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`Progreso de descarga: ${porcentaje}%`);
}
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'archivo_descargado.pdf'); // Nombre del archivo descargado
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error('Error al descargar el archivo:', error);
});En este ejemplo, el progreso de la descarga se calcula y se muestra a medida que el archivo se descarga, mostrando el porcentaje completado.
Ejemplos adicionales
Mostrar barra de progreso para subida de archivos
Puedes mostrar una barra de progreso visual en la interfaz del usuario (por ejemplo, en un elemento HTML <progress>) usando onUploadProgress:
<input type="file" id="archivoInput">
<progress id="barraProgreso" value="0" max="100"></progress>
<script>
const archivoInput = document.getElementById('archivoInput');
const barraProgreso = document.getElementById('barraProgreso');
archivoInput.addEventListener('change', function() {
const archivo = archivoInput.files[0];
const formData = new FormData();
formData.append('archivo', archivo);
axios.post('https://api.ejemplo.com/subir', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function (progressEvent) {
const porcentaje = Math.round((progressEvent.loaded * 100) / progressEvent.total);
barraProgreso.value = porcentaje; // Actualizar la barra de progreso
}
})
.then(response => {
console.log('Archivo subido exitosamente:', response.data);
})
.catch(error => {
console.error('Error al subir el archivo:', error);
});
});
</script>
Aquí, onUploadProgress actualiza una barra de progreso (<progress>) en tiempo real durante la subida de un archivo.
Descargar grandes archivos y mostrar progreso
De manera similar, puedes mostrar el progreso de la descarga usando onDownloadProgress:
<progress id="barraDescarga" value="0" max="100"></progress>
<script>
const barraDescarga = document.getElementById('barraDescarga');
axios.get('https://api.ejemplo.com/descargar', {
responseType: 'blob',
onDownloadProgress: function (progressEvent) {
const porcentaje = Math.round((progressEvent.loaded * 100) / progressEvent.total);
barraDescarga.value = porcentaje; // Actualizar barra de progreso durante la descarga
}
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'archivo.pdf');
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error('Error al descargar el archivo:', error);
});
</script>Este código rastrea el progreso de la descarga de un archivo grande y muestra el porcentaje en una barra de progreso.
Consideraciones
- Compatibilidad del navegador: Los eventos de progreso son soportados por la mayoría de los navegadores modernos, pero puede haber algunas limitaciones en navegadores antiguos.
- CORS: Asegúrate de que el servidor soporte solicitudes CORS si estás rastreando el progreso de una descarga o subida desde un dominio diferente.
Referencia oficial
Puedes encontrar más detalles en la documentación oficial de Axios.
Jorge García
Fullstack developer