如何让用户从网络应用程序的 firebase 存储下载图像？

Question

我正在尝试让用户从 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">

这对于实际获取和显示图像效果很好。但是，当我尝试让用户使用另一个 link 下载它时，其下载属性如下：

<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
  }
]

从那里它仍然无法正常工作所以我将 google 云图像存储桶上的读取设置为 public 并确保我的 firebase 存储规则设置为读取 public以及。仍然没有变化。

此时我真的不知道该怎么办。也许有一些方法可以使用此代码（关于如何下载文件的 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 文件扩展名或它下载和工作的东西。但是，当我将其添加到代码中时，它只会下载一个“格式不受支持”的文件。

非常感谢任何帮助甚至指向我错过的资源的指示。

Answer 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 到 google 云创建对存储的引用。请参阅 firebase 文档：https://firebase.google.com/docs/storage/web/download-files

如何让用户从网络应用程序的 firebase 存储下载图像？

How to let user download an image from firebase storage on web app?

imagedownload

google-cloud-storage

firebase

firebase-storage