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

问题描述

我有一个 ReactJS 应用程序，它允许用户使用文件上传器选择一个文件并将其上传到 Firebase 存储（而不是数据库）。这些上传存储在一个名为“sorts”的目录中。用户可以上传 PDF、图像、WebM 等。我正在尝试列出在 UI 上的存储中找到的所有文件，但我遇到了问题。我认为有一种方法可以使用 Firebase 数据库，但不太确定是否可以使用 Firebase 存储。我已经尝试通过网络跟踪文档下载文件，但我无法真正让它工作。我在网上找到的大部分内容只显示存储中的一个文件，而不是所有文件的列表。目前，我能够以以下形式获取每个文件的下载 URL 列表：https://firebasestorage.googleapis.com/v0/b/algorithms-visualiser-react.appspot.com/o/sorts%2Fvideo_956493.webm?alt=media&token=07b18ccf-3e3d-4a1f-88b5-193528f0cf09。当我尝试在实际 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 端的列表中列出所有这些下载链接，那就太好了。任何帮助将不胜感激。

标签： reactjsfirebasefirebase-storage

这是一个如何在不使用getDownloadURL. 我正在做的是使用所需文件夹的存储引用中的列表，然后添加所需的前缀而不是 firebase 需要的斜线。因此，不使用getDownloadURL我就得到了所有的网址。

storageRef.listAll().then(function (result) {
            let path = storageRef.fullPath
            path = path.replace(/\b\/\b(?!.*?\b\/\b)/, "%2F");
            result.items.forEach(fileRef => {
                temp.push({name:  fileRef.name, url: path + "%2F" + fileRef.name +"?alt=media"  })
            });
        }).then(()=>{
        
            // set data in your any state variable for later use
            setData(temp)
        }).catch(error => {
            console.log(error);
        })

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

问题描述

解决方案

推荐阅读