我如何以不同的方法上的反应上的firebase上载多个图像？

Question

我想在console.log（list） uploadbytes中console.log（），以便我可以实现它并在我的后端传递，而无需分开。

该代码是这样的，

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()
}

我唯一的问题是在const list = []中，其中我想在我的列表中附加每个uploadbytes，这样我就不会要反复称呼后端，因为Imma在每个uploadbytes中都将后端放在那里，但我想让它更容易，因为将其推入列表中。

我试图在异步中执行此操作，但它无法解决。它确实给了我一个空的阵列，因为我不知道吗？我只是想我需要将uploadbytes作为异步，但仍然不起作用。

Answer 1

如果我正确理解您的问题，您想在上传所有图像后记录下载URL的列表。

这要求您处理每个上传的两个异步操作：

• 数据本身的上传，
• 调用以获取下载URL。

由于您需要为每个图像执行此操作，因此您需要一个Promise.All，并且由于这是两个调用，因此您需要链接的然后操作。

结合起来导致：

// 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)
}