[使用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对象：

成功地，我已经将文件上传到Firebase存储器中，但是现在我想在表中显示所有文件，并可以选择下载每个文件。我已经阅读了Firebase中的文档，但不会。。。]] >

您的代码获得了所有文件的列表，但是读取每个文件的数据实际上并没有任何作用。

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

1. 循环浏览从listAll()中获得的所有文件（您已经在执行此操作。）>
2. 按here所示调用`getDownloadURL，以获取每个文件的下载URL。

然后使用另一个库/函数（例如fetch() / XMLHTTPRequest）来读取每个文件的数据。

或者，如果您的文件是图像，则可以将下载URL填充在img标签中作为预览。

Answer 1

您的代码获得了所有文件的列表，但是读取每个文件的数据实际上并没有任何作用。