Как разрешить пользователю загружать изображение из хранилища 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
  }
]

Оттуда он все еще не работал, поэтому я установил чтение в корзине изображений облака Google как общедоступный и убедился, что мои правила хранения 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 или что-то, что оно загружает и работает. Однако, когда я добавляю это в код, он просто загружает файл, формат которого не поддерживается.

Любая помощь или даже указатели на ресурсы, которые я пропустил, были бы очень признательны.


firebase firebase-storage google-cloud-storage imagedownload
person Magitrix Alyxra    schedule 01.04.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я смог придумать обходной путь.

<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

person Magitrix Alyxra    schedule 01.04.2021