Estoy implementando un componente de carga de varios archivos que muestra el porcentaje de progreso de carga de cada archivo usando axios en Vue.js.

Pero el "onUploadProgress" en axios parece devolver el progreso general, no el progreso de cada archivo. Por lo tanto, no se muestra el progreso del primer archivo.

El valor total del objeto ProgressEvent coincide con la suma de los tamaños de los dos archivos en la imagen a continuación.

[Código]

 let formData = new FormData(); payload.data.files.forEach((data) => { formData.append('files[]', data); }); ... let response = await axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { let percentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100)); let files = store.state.uploadFiles.map((value, index, row) => { if(index === row.length - 1) { value.uploadPercentage = percentage; } return value; }); store.commit(Constant.UPLOAD_FILES, { files: files }); } }); if (response.data.success) { let files = store.state.uploadFiles.map((value, index, row) => { if(index === row.length - 1) { value.uploadPercentage = 100; } return value; }); store.commit(Constant.UPLOAD_FILES, { files: files }); }

Recorrer una solicitud de carga de un solo archivo es la solución que he estado buscando. Me pregunto si hay alguna otra manera en absoluto.

Por favor ayuda. Cualquier idea sería muy apreciada.