如何在 table 视图中可视化 firebase 的文件存储内容?
How to visualize filestorage content of firebase in table at the view?
我想在 datatable 中表示 firebase 存储的 downloadUrl,我们可以在其中查看文件并下载到计算机。
目前我已经成功获取所有文件和链接,但是如何在 table 中获取此链接,用户可以点击它。
获取所有firebase存储的函数:
showFileUrl(){
storageRef.child('UploadedFiles/').listAll().then(function(res) {
res.items.forEach(function(folderRef) {
folderRef.getDownloadURL().then(function(url) {
console.log('Got download URL',url);
});
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",blob)
// var path = storageRef.child('UploadedFiles/').getDownloadURL(folderRef);
// var zip = new JSZip();
// zip.file(path,blob);
}
xhr.send();
});
}).catch(function(error) {
console.log(error);
});
}
查看标签:
<table>
<tbody>
{urls.map((user) => {
return (
<tr key={Math.random()}>
<td>{user}</td>
</tr>);}
)}
</tbody>
</table>
查看输出:
设置一个辅助变量以在到达时填充 url。
const urls = [];
res.items.forEach(function(folderRef) {
folderRef.getDownloadURL().then(function(url) {
urls.push(url);
});
});
然后状态设置一次就可以进行下一步了
this.setState({ urls }):
在视图中显示列表
render() {
<div>
{this.state.urls.map(url => (
<a key={url} href={url}>url</url>
))
</div>
}
我想在 datatable 中表示 firebase 存储的 downloadUrl,我们可以在其中查看文件并下载到计算机。
目前我已经成功获取所有文件和链接,但是如何在 table 中获取此链接,用户可以点击它。
获取所有firebase存储的函数:
showFileUrl(){
storageRef.child('UploadedFiles/').listAll().then(function(res) {
res.items.forEach(function(folderRef) {
folderRef.getDownloadURL().then(function(url) {
console.log('Got download URL',url);
});
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",blob)
// var path = storageRef.child('UploadedFiles/').getDownloadURL(folderRef);
// var zip = new JSZip();
// zip.file(path,blob);
}
xhr.send();
});
}).catch(function(error) {
console.log(error);
});
}
查看标签:
<table>
<tbody>
{urls.map((user) => {
return (
<tr key={Math.random()}>
<td>{user}</td>
</tr>);}
)}
</tbody>
</table>
查看输出:
设置一个辅助变量以在到达时填充 url。
const urls = [];
res.items.forEach(function(folderRef) {
folderRef.getDownloadURL().then(function(url) {
urls.push(url);
});
});
然后状态设置一次就可以进行下一步了
this.setState({ urls }):
在视图中显示列表
render() {
<div>
{this.state.urls.map(url => (
<a key={url} href={url}>url</url>
))
</div>
}