使用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标签中作为预览。