从 firebase 存储中获取每个文件的下载 URL

Question

我正在尝试从 firebase 存储中获取每个文件的下载 URL。 目前我正在显示元数据（在这种情况下是每个文件的名称）。

  const [fileNames, setFileNames] = useState([]);

  useEffect(() => {
    const getFiles = async () => {
      const storage = await firebase.storage().ref("/recursos");
      const list = await storage.listAll();
      const items = list.items.map((ref) => ref.getMetadata());
      const results = await Promise.all(items);
      setFileNames(results);
    };
    getFiles();
  }, []);

  return (
    <div className="home">
      <SinapseNav />
      <Container className="d-flex align-items-center justify-content-center mt-4 mb-4">
        <Card className="home-card">
          <Card.Body>
            <h3 className="text-center mb-4">Pesquisar Recursos</h3>
            <Form.Control placeholder='Ex: "Trigonometria"' />

            {fileNames.map((file) => {
              return (
                <Container key={file.name}>
                  <ResourceCard title={file.name} />
                </Container>
              );
            })}
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
} 

Answer 1

如文档中所述，您可以对通过listAll()获得的ListResult的项目调用getDownloadUrl() () 。 与使用getMetadata()的方式完全相同。

因此，以下应该可以解决问题：

const getUrls = async () => {
  const storage = firebase.storage().ref("/recursos");
  const list = await storage.listAll();
  const items = list.items.map((ref) => ref.getDownloadUrl());
  const urls = await Promise.all(items);
  // Do whatever you want with the urls Array
};

---

请注意， listAll()的默认分页大小为 1000：它实际上是“重复调用list()直到没有更多结果的辅助方法”。