使用 ReactJs 从 firebase 存储下载文件

Question

我已成功将文件上传到 firebase 存储，但现在我想显示表中的所有文件并可以选择下载每个文件。我已阅读 firebase 中的文档，但它不起作用。当我单击用于获取所有文件的按钮，我想在用户可以看到的表格中将它们可视化：

显示文件功能：

 showFileUrl(){

   storageRef.child('UploadedFiles/').listAll().then(function(res) {
      res.items.forEach(function(folderRef) {
        console.log("folderRef",folderRef.toString());
        var blob = null;
        var xhr = new XMLHttpRequest(); 
        xhr.open("GET", "downloadURL"); 
        xhr.responseType = "blob";
        xhr.onload = function() 
        {
        blob = xhr.response;//xhr.response is now a blob object
        console.log(blob);
    }
        xhr.send();
      });

    }).catch(function(error) {

    });
  }

这是我在调试时发现的网络日志。我需要做些什么来获取所有数据并将其可视化在表格中并有一个下载按钮以及何时按下下载文件

网络日志：

Firebase 中的存储：

文件的 Blob 对象：

Answer 1

您的代码获取所有文件的列表，但实际上并没有读取每个文件的数据。

使用 Web 客户端 SDK 时，获取文件数据的唯一方法是通过下载 URL，如 here 所示。所以你需要：

1. 循环查看您从listAll() 返回的所有文件（您已经在这样做了）。
2. 如here所示调用`getDownloadURL，获取每个文件的下载URL。
3. 然后使用另一个库/函数（例如fetch()/XMLHTTPRequest）来读取每个文件的数据。
4. 或者，如果您的文件是图像，您可以将下载 URL 填充到 img 标记中作为预览。