如何在将多个图像上传到 Firebase 存储时显示进度条？

我制作了将多个图像上传到存储并将链接保存到文档的功能，但我不知道如何监控进度。

const getURLS = async () => {
    const promises = [];
    images &&
        images.map((image) => {
            const storageRef = ref(storage, `images/${image?.file?.name + v4()}`);
            promises.push(
                uploadBytesResumable(storageRef, dataURLtoBlob(image.data_url)).then((uploadResult) => {
                    return getDownloadURL(uploadResult.ref);
                })
            );
        });

    const urls = await Promise.all(promises);

    try {
        await addDoc(collection(db, 'posts'), {
            message: data,
            createdAt: serverTimestamp(),
            createdBy: user,
            likes: [],
            comments: [],
            images: urls,
        }).then(() => {
            setData('');
            setImages([]);
        });
    } catch (err) {
        console.log(err);
    }
};

如何添加到这个功能？ 我尝试了不同的方法但不起作用

谢谢帮助

The uploadBytesResumable() https://firebase.google.com/docs/reference/js/storage#uploadbytesresumable不返回承诺，而是返回UploadTask。您可以迭代所有选定的图像并单独跟踪它们的进度，如下所示：

function App() {
  const [images, setImages] = useState([])
  const [progress, setProgress] = useState([])

  const handleFileChange = (e) => {
    const files = e.target.files
    const newImages = []
    for (let i = 0; i < files.length; i++) {
      newImages.push(files[i])
    }
    setImages(newImages)
  }

  const handleUpload = async () => {
    for (let i = 0; i < images.length; i++) {
      const image = images[i]
      const storageRef = ref(storage, `images/${image.name}`)
      const uploadTask = uploadBytesResumable(storageRef, image)
      uploadTask.on('state_changed', (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100

        setProgress((prevProgress) => {
          const newProgress = [...prevProgress]
          newProgress[i] = progress.toFixed(2)
          return newProgress
        })
      }, (error) => {
        console.log(error)
      }, async () => {
        const imageUrl = await getDownloadURL(uploadTask.snapshot.ref)
        // Add to Firestore
      })
    }
  }

  return (
    <div className="App">
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
      {progress.map((progress, i) => (
        <div key={i}>{images[i].name}  {progress}%</div>
      ))}
    </div>
  )
}

每个文件都是单独上传的，因此您必须实现一些逻辑来将所有 URL 组合在一起并添加到 Firestore 文档中，就像您可以在所有上传进度（即中的所有项目）时调用函数一样progress数组变成100。