如何让用户从网络应用上的 Firebase 存储下载图像？

问题描述

我正在尝试让用户从 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&amp;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&amp;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 文件扩展名或它下载和工作的内容。但是，当我将其添加到代码中时，它只会下载一个“不受支持的格式”的文件。

我将不胜感激任何帮助甚至指向我错过的资源的指针。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）