在 ReactJS 中从 Firebase 下载多个文件

Question

我在 Firebase 存储中有几个包含图像的文件夹（每个文件夹对应一个实体）。https://i.stack.imgur.com/s9ZpX.png

当我想下载每个实体的 url 时，firebase 所做的就是将它在存储中的所有图像带给我，即使它对每个实体执行 forEach。

useEffect(() => {
setLoading(true);
Promise.all([getRooms(), getLocation()])
  .then((values) => {
    const roomsSnapshot = values[0];
    const rooms = [];
    const pUrl = [];
    roomsSnapshot.forEach((doc) => {
      const splitAddress = doc.data().address.split(", ");
      formatedAddress.current = splitAddress[1] + " " + splitAddress[0];

    //Download from storage//

      storage
        .ref(`${doc.data().roomPhotoId}/`)
        .list()
        .then(function (result) {
          result.items.forEach((imageRef) => {
            imageRef.getDownloadURL().then((url) => {
              console.log(url)
              roomItems.push(url)

            });
          });
          setRoomsImagesCounter(roomsImagesCounter + 1);
          // no photos scenario
          if (result.items.length === 0) {
            setLoading(false);
          }
        });

      //pushing entity data//

      rooms.push({
        ...doc.data(),
        id: doc.id,
        photosURL: roomItems,
        shortAddress: formatedAddress.current,
        coordsAddress: coords.current,
      });
    });
    console.log(rooms);
    setRooms(rooms);
    // getPhotos(rooms);

    setLoading(false);
  })
  .catch((err) => {
    console.log("Error getting getting rooms or user role", err);
  });
// eslint-disable-next-line react-hooks/exhaustive-deps }, []);

我不知道为什么 firebase 会为我提供所有图像，而不是为每个实体分别提供图像。

希望您已经理解，我等待您的回答或您的任何问题。

谢谢！

更新

这是 console.log(rooms) https://i.stack.imgur.com/rQkoB.png

Answer 1

您可以尝试像这样创建存储ref：

// Create a reference under which you want to list
var listRef = storage.ref().child(`${doc.data().roomPhotoId}/`);

// Find all the prefixes and items.
listRef.listAll()
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });

确保使用listAll。

请注意：

• root.child('images').listAll() 将返回 /images/uid 作为前缀。
• root.child('images/uid').listAll() 将文件作为项目返回。

您可以在here找到更多相关信息。

您对 downloadURLS 进行分组的代码：

useEffect(() => {
setLoading(true);
Promise.all([getRooms(), getLocation()])
  .then((values) => {
    const roomsSnapshot = values[0];
    const rooms = [];
    const pUrl = [];
    roomsSnapshot.forEach((doc) => {
      const splitAddress = doc.data().address.split(", ");
      formatedAddress.current = splitAddress[1] + " " + splitAddress[0];

    //Download from storage//

      rooms[`${doc.data().roomPhotoId}`]=[]

      storage
        .ref(`${doc.data().roomPhotoId}/`)
        .list()
        .then(function (result) {
          result.items.forEach((imageRef) => {
            imageRef.getDownloadURL().then((url) => {
              console.log(url)
              roomItems.push(url)

            });
          });
          setRoomsImagesCounter(roomsImagesCounter + 1);
          // no photos scenario
          if (result.items.length === 0) {
            setLoading(false);
          }
        });

      //pushing entity data//

      rooms[`${doc.data().roomPhotoId}`].push({
        ...doc.data(),
        id: doc.id,
        photosURL: roomItems,
        shortAddress: formatedAddress.current,
        coordsAddress: coords.current,
      });
    });
    console.log(rooms);
    setRooms(rooms);
    // getPhotos(rooms);

    setLoading(false);
  })
  .catch((err) => {
    console.log("Error getting getting rooms or user role", err);
  });
// eslint-disable-next-line react-hooks/exhaustive-deps }, []);