javascript - 如何在 javascript firebase 存储中等待下载 url？

Question

我有一张地图，它将获取一组文件，并从 firebase 存储返回一组下载 url。

const imageUrls = images.map((image, index) => {
    const imageUploadTask = storage()
      .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
      .put(image);

    imageUploadTask.on(
      "state_changed",
      (snapshot) => {},
      (error) => {
        console.log(error);
      },
      () => {
        storage()
          .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
          .getDownloadURL()
          .then((url) => {
            console.log(url);
            return url;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    );
  });

当我记录 imageUrls 数组时，它返回一个未定义的数组。但是在控制台中，我看到了一段时间后记录的 url。这意味着 url 正在上传，但代码没有等待它并在未定义 url 时返回。

我究竟做错了什么？如何让它发挥作用？

标签： javascriptfirebase-storage

Answer 1

您需要设置一个单独的变量，您将在其中.push(url)推送 url。请参阅下面的示例：

    var imageUrls = []; // <======== set this as a separate variable and remove it from the next line
    
    images.map((image, index) => {
        const imageUploadTask = storage()
          .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
          .put(image);
    
        imageUploadTask.on(
          "state_changed",
          (snapshot) => {},
          (error) => {
            console.log(error);
          },
          () => {
            storage()
              .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
              .getDownloadURL()
              .then((url) => {
                console.log(url);
                imageUrls.push(url); // <============= add this line here
                return url; // <====== you can remove this
              })
              .catch((err) => {
                console.log(err);
              });
          }
        );
      });