从 firebase 存储中获取每个文件的 downloadURL答案

【问题标题】：Get the downloadURL for each file from firebase storage从 firebase 存储中获取每个文件的 downloadURL
【发布时间】：2021-03-18 21:55:32
【问题描述】：

我正在尝试从 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>
  );
}

【问题讨论】：

是什么阻碍了您根据您拥有的代码和firebase.google.com/docs/storage/web/… 实现额外的用例？
我不知道如何获得每一个。我试图查看文档，但它不起作用......对不起，我是 js 新手并做出反应:)

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

正如doc 中所述，您可以在通过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()直到没有更多结果的辅助方法”。

【讨论】：