Este es el fragmento de código donde quiero obtener la URL de todas las imágenes cargadas en promise.all . Todo, pero cuando invoco la función uploadFile , devuelve una matriz vacía. ¿Alguien puede ayudarme con este problema?
export default function uploadFile(fileInfo) { const promises = []; fileInfo.forEach((item) => { const uploadTask = projectStorage .ref() .child(`${item.path}/${item.imageName}`) .put(item.file); // promises.push({ task: uploadTask }); uploadTask.on( "state_changed", (snapshot) => { promises.push(snapshot); const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(`Progress: ${progress}%`); }, (error) => console.log(error.code), async() => { promises.push(await uploadTask.snapshot.ref.getDownloadURL()); } ); }); return Promise.all(promises); }El problema es que está completando las promises dentro on oyente, y no hay nada que haga que la return Promise.all(promises) espere hasta que se completen on llamadas.
Afortunadamente, llamar a put ya devuelve una promesa, que se resuelve una vez que se completa la carga. Entonces, en lugar de usar la devolución on llamada para señalar la finalización, puede esperar put que se resuelva la opción:
export default function uploadFile(fileInfo) { const promises = fileInfo.map((item) => { const uploadRef = projectStorage .ref() .child(`${item.path}/${item.imageName}`)l const uploadTask = uploadRef.put(item.file); /* uploadTask.on( "state_changed", (snapshot) => { const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(`Progress: ${progress}%`); }, (error) => console.log(error.code), async() => { } ); */ return uploadTask.then(() => return uploadRef.getDownloadURL()); }); return Promise.all(promises); }Cada vez que recorres el ciclo forEach necesitas:
promises . No estás creando ninguna promesa. Está utilizando una API de devolución de llamada regular y está tratando de colocar el resultado final de la devolución de llamada en la matriz (pero eso sucede en el futuro, que es después de haber pasado la matriz vacía a Promise.all .
Consulte ¿Cómo convierto una API de devolución de llamada existente en promesas? para saber cómo envolver uploadTask.on en una promesa.
También vea esta pregunta similar sobre cómo convertir llamadas a una API de devolución de llamada varias veces y recopilar todos los resultados usando Promise.all .