從 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()直到沒有更多結果的輔助方法”。