您如何结合多个异步文件上传并能够同时引用两个新创建的 URL 并将其写入数据库？

Question

我正在研究这个“postAPI”，它接收的有效负载最多可以包含 (2) 个单独的文件。

一旦包含文件的负载被分派到 postAPI。我需要它来将文件上传到 firebase 存储桶，然后 save/write URL 之后成功。

如果我使用下面显示的代码将它限制为一个文件或另一个文件，我现在可以让它工作。

我的问题是如果有两个文件，我无法引用/传递新上传的 URL 返回到第二个进程。这里有一些代码可以帮助解释。

这基本上是我目前的拆分方式：

export function postAPI(payload) {
  return (dispatch) => {
    dispatch(setLoading(true));

    if (payload.firstDoc !== "") {
      const upload = storage
        .ref(`documents/${payload.firstDoc.name}`)
        .put(payload.firstDoc);
      upload.on(
        "state_changed",
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log(`Progress: ${progress}%`);
          if (snapshot.state === "RUNNING") {
            console.log(`Progress: ${progress}%`);
          }
        },
        (error) => console.log(error.code),
        async () => {
          const downloadURL = await upload.snapshot.ref.getDownloadURL();
          db.collection("articles").add({
            data: payload.data,
            firstDoc: downloadURL,
            secondDoc: "",
          });
          dispatch(setLoading(false));
        }
      );
    } 

    if (payload.secondDoc !== "") {
        const secondUpload = storage
          .ref(`documents/${payload.secondDoc.name}`)
          .put(payload.secondDoc);
        secondUpload.on(
          "state_changed",
          (snapshot) => {
            const progress =
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  
            console.log(`Progress: ${progress}%`);
            if (snapshot.state === "RUNNING") {
              console.log(`Progress: ${progress}%`);
            }
          },
          (error) => console.log(error.code),
          async () => {
            const secondDownloadURL = await secondUpload.snapshot.ref.getDownloadURL();
            console.log(downloadURLpod);
            db.collection("articles").add({
                data: payload.data,
                firstDoc: "",
                secondDoc: secondDownloadURL,
            });
            dispatch(setLoading(false));
          }
        );
      }
  }
}

我不知道如何存储 and/or 通过第一个 'downloadURL' 以在第二个进程中可用。

基本上我只需要一种方法能够同时访问 downloadURL 和 secondDownloadURL 以获得相同的 db.add()。

提前致谢！

Answer 1

只需将上传用作 Promise 而不是上传任务。这样你就可以简单地等待他们，直到他们每个人都完成。它看起来像这样：

export async function postAPI(payload) {
  return async (dispatch) => {
    dispatch(setLoading(true));

    let downloadURL1 = null;
    let downloadURL2 = null;

    if (payload.firstDoc !== "") {
      const snapshot1 = await storage
        .ref(`documents/${payload.firstDoc.name}`)
        .put(payload.firstDoc);

      const downloadURL1 = await snapshot1.ref.getDownloadURL();
    }

    if (payload.secondDoc !== "") {
      const snapshot2 = await storage
        .ref(`documents/${payload.secondDoc.name}`)
        .put(payload.secondDoc);

      const downloadURL2 = await snapshot2.ref.getDownloadURL();
    }

    db.collection("articles").add({
      data: payload.data,
      firstDoc: downloadURL1,
      secondDoc: downloadURL2,
    });
    dispatch(setLoading(false));
  };
}

您如何结合多个异步文件上传并能够同时引用两个新创建的 URL 并将其写入数据库？

How can you combine multiple async file uploads and be able to reference and write BOTH newly created URLS to database at same time?

reactjs

redux

firebase-storage

google-cloud-firestore