ReactJS-在列表中的UI上显示Firebase存储中的所有文件

Question

我有一个ReactJS应用程序，该应用程序允许用户使用文件上传器选择文件并将其上传到Firebase存储（不是数据库）。这些上传内容存储在名为“ sorts”的目录中。用户可以上传PDF，图像，WebM等。我试图列出在UI上的存储中找到的所有文件，但是出现问题。我认为可以使用Firebase数据库执行此操作，但不太确定Firebase Storage是否可行。我尝试按照文档download files via web进行操作，但实际上无法正常工作。我在网上找到的大多数内容仅显示存储中的一个文件，而不显示所有文件的列表。目前，我能够以https://firebasestorage.googleapis.com/v0/b/algorithms-visualiser-react.appspot.com/o/sorts%2Fvideo_956493.webm?alt=media&token=07b18ccf-3e3d-4a1f-88b5-193528f0cf09的形式获取每个文件的下载URL列表。当我尝试在实际的UI上列出所有这些内容时，问题就来了（无论是每个文件的实际视觉表示，还是只是单击后将下载文件的所有下载URL的列表）。

下面是相关代码：

• 正在上传：

  handleUploadStart = () => {
     this.setState ({
        progress: 0
      })
  }
  
  handleUploadSuccess = filename => {
     this.setState ({
       sort: filename, 
       progress: 100
     })
  
     firebase.storage().ref('sorts').child(filename).getDownloadURL()
     .then(url => this.setState ({
       videoURL: url
     }))
  }
  

• 渲染功能（包括如何检索每个下载链接以及如何上传文件）

  render() {
  const { classes } = this.props;
  console.log(this.state);
  
  var i = 0;
  let displayFile = '';
  const sorts = [];
  $('#Sorts').find('tbody').html('');
  
  firebase.storage().ref().child('sorts/').listAll().then(function(result) {
      result.items.forEach(function(fileRef) {
          i++; // Counter for each file in storage
  
          fileRef.getDownloadURL().then(function(fileURL) {
              console.log(fileURL);
              sorts.push(fileURL);
          })
      });
  });
  
  return (
  <div className="App">
      <SortsToolbar history={this.props.history} />
      <FileUploader 
      accept="*"
      name="video"
      storageRef={firebase.storage().ref('sorts')} 
      onUploadStart={this.handleUploadStart}
      onUploadSuccess={this.handleUploadSuccess} />
      <br />
      {sorts.items.map((item, index) => (
          <li key={index} item={item} />
      ))}
  </div>
  );
  }
  

如前所述，如果我可以简单地找到一种在UI端列表中列出所有这些下载链接的方法，那就好了。任何帮助将不胜感激。

Answer 1

getDownloadURL是从Cloud Storage中的文件获取URL的唯一方法，并且一次只能处理一个文件。对此没有批量操作。

您可以尝试使用list API列出所需的文件，但是您仍然必须迭代该列表并在每个文件上调用getDownloadURL。

对于这样的任务，通常将URL存储在数据库和查询中，这通常是更轻松，更快捷的方法。