Quiero console.log() en console.log(list) los uploadBytes de mi imagen, para poder implementarlo y pasarlo a mi backend sin separarlo.
el codigo es algo asi
const handleSubmitForm = e => { e.preventDefault() alert("Your Images Is Uploaded") const imagesRef = ref(storage,`GALLERY/${image.name}${v4()}`) const imagesRef2 = ref(storage,`GALLERY/${image2.name}${v4()}`) const imagesRef3 = ref(storage,`GALLERY/${image3.name}${v4()}`) const imagesRef4 = ref(storage,`GALLERY/${image4.name}${v4()}`) const imagesRef5 = ref(storage,`GALLERY/${image5.name}${v4()}`) const id = v4() const Uploads = async() => { const list = [] uploadBytes(imagesRef,image) .then((snapshot) => { getDownloadURL(snapshot.ref).then((url) => { console.log('Image uploaded' + `${url}`) const item = url list.push(item) }) }) uploadBytes(imagesRef2,image2) .then((snapshot) => { getDownloadURL(snapshot.ref).then((url) => { console.log('Image uploaded' + `${url}`) const item = url list.push(item) }) }) uploadBytes(imagesRef3,image3) .then((snapshot) => { getDownloadURL(snapshot.ref).then((url) => { console.log('Image uploaded' + `${url}`) const item = url list.push(item) }) }) uploadBytes(imagesRef4,image4) .then((snapshot) => { getDownloadURL(snapshot.ref).then((url) => { console.log('Image uploaded' + `${url}`) const item = url list.push(item) }) }) uploadBytes(imagesRef5,image5) .then((snapshot) => { getDownloadURL(snapshot.ref).then((url) => { console.log('Image uploaded' + `${url}`) const item = url list.push(item) }) }) console.log(list) } Uploads() } Mi único problema aquí es const list = [] , donde quiero agregar cada uploadBytes en mi lista, para no tener que llamar repetidamente al backend, porque voy a poner un backend allí en cada uploadBytes , pero quiero hacerlo más fácil como simplemente empujarlo en la lista.
Traté de hacerlo en asíncrono pero no funciona. ¿Simplemente me da una matriz vacía porque no lo sé? Solo estoy pensando que necesito hacer que uploadBytes sea asíncrono, pero aún no funciona.
Si entiendo su pregunta correctamente, desea registrar la lista de URL de descarga después de que se hayan cargado todas las imágenes.
Esto requiere que maneje dos operaciones asincrónicas para cada carga:
Dado que debe hacer esto para cada imagen, necesitará Promise.all y, dado que son dos llamadas, necesitará then operación encadenada.
La combinación de esto conduce a:
// Helper function to upload an image and get back its download URL const UploadSingleImage = (ref, image) => { return uploadBytes(ref, image).then((snapshot) => { return getDownloadURL(ref); }) } const Uploads = async () => { const list = await Promise.all([ UploadSingleImage(imagesRef, image), UploadSingleImage(imagesRef2, image2), UploadSingleImage(imagesRef3, image3), UploadSingleImage(imagesRef4, image4), UploadSingleImage(imagesRef5, image5) ]); console.log(list) }