如何让用户从 web 应用程序上的 firebase 存储下载图像?
Posted
技术标签:
【中文标题】如何让用户从 web 应用程序上的 firebase 存储下载图像?【英文标题】:How to let user download an image from firebase storage on web app? 【发布时间】:2021-06-28 20:24:19 【问题描述】:我正在尝试让用户从 Firebase 存储中下载图像。每个图像的下载 URL 都保存在 firestore 集合中,因此在生成图像时,每个图像都被分配了正确的 url。喜欢:
<img src="https://firebasestorage.googleapis.com/v0/b/odyssey-
f90f0.appspot.com/o/images%2F2539888b-eabd-84b9-9c72-b0f1ee9b0af6?alt=media&token=acb8655f-fd8f-
4d94-9ba0-dc29c3f3c399">
这对于实际获取和显示图像效果很好。但是,当我尝试让用户使用具有下载属性的另一个链接下载它时:
<a href="#" download="https://firebasestorage.googleapis.com/v0/b/odyssey-
f90f0.appspot.com/o/images%2F2539888b-eabd-84b9-9c72-b0f1ee9b0af6?
alt=media&token=acb8655f-fd8f-4d94-9ba0-dc29c3f3c399">Download</a>
它只是下载一些不可见的奇怪文件格式:
https://ibb.co/pfQjXry
本来我只是以为是CORS的问题,于是按照firebase文档https://firebase.google.com/docs/storage/web/download-files下载了gsutil命令行工具,然后设置了一个cors.json,设置CORS配置如下:
[
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
]
从那里它仍然无法正常工作,因此我将谷歌云图像存储桶上的读取设置为公开,并确保我的 Firebase 存储规则也设置为公开读取。还是没有变化。
在这一点上,我真的不知道该怎么办。也许有某种方法可以使用此代码(有关如何下载文件的 firebase 文档)来获取实际的文件数据并将其设置为下载属性而不是 url 或其他内容,但我不知道该怎么做那个。
function downloadImage(imageURL)
// Create a reference to the file we want to download
var httpsReference = storage.refFromURL(imageURL);
// Get the download URL
httpsReference.getDownloadURL()
.then((url) =>
// download image directly via url
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (event) =>
var blob = xhr.response;
;
xhr.open('GET', url);
xhr.send();
);
另外,奇怪的是 - 如果我右键单击网站上显示的图像,另存为 - 然后手动设置 .jpg 或 .png 文件扩展名或它下载和工作的东西。但是,当我将其添加到代码中时,它只会下载一个“不受支持的格式”的文件。
非常感谢任何帮助,甚至是我错过的资源的指针。
【问题讨论】:
【参考方案1】:我想出了一个解决方法。
<body>
<a id = 'tagID' href = '' download = ''>Download</a>
</body>
<script>
//create a reference to the image in the firebase storage by using the url
var httpsReference = storage.refFromURL(imageURL);
// Get the download URL
httpsReference.getDownloadURL()
.then((url) =>
// download image directly via url
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (event) =>
var blob = xhr.response;
//create a file from the returned blob
var file = new File([blob], "image name", type: blob.type );
//grab the a tag
a1 = document.getElementById('tagID');
//set the download attribute of the a tag to the name stored in the file
a1.download = file.name;
//generate a temp url to host the image for download
a1.href = URL.createObjectURL(file);
;
xhr.open('GET', url);
xhr.send();
);
</script>
现在,当用户单击锚元素时,将下载图像。
注意:您也可以使用直接路径或指向谷歌云的 url 创建对存储的引用。请参阅 firebase 文档:https://firebase.google.com/docs/storage/web/download-files
【讨论】:
以上是关于如何让用户从 web 应用程序上的 firebase 存储下载图像?的主要内容,如果未能解决你的问题,请参考以下文章