将文件上传到 Firebase - AngularFire - 使用页面上加载图像的 URL

Question

我正在为我的网络应用程序开发复制功能。 它复制表格的数据和与其关联的图像。

我一直在使用 AngularFire 从 Firebase 存储复制图像。 对于常规图像上传，我使用输入元素并将其传递给 AngularFireStorage。

这是一个例子：

import { AngularFireStorage } from '@angular/fire/compat/storage';

const file = $event.target.files[0];
const filePath = `${myPath}`;
const task = this.storage.upload(filePath, file);

我想要复制的图像已作为 HTML

<img>

元素加载到页面上。

我是否需要使用 Blog 对象或从 URL 创建可上传格式的 Firebase 对象？

我尝试了这个，但收到 CORS 错误

  var startFileDuplication = (_this) => {
    _this.storage
      .ref(`/tableImages/${this.userInfo.uid}/${this.activeDate}/${activeTable.key}`)
      .listAll()
      .subscribe(async (data) => {
        for (const image of data.items) {
          const path = image.fullPath;
          const url = await image.getDownloadURL();
          const fileBlob = await this.downloadFile(url);
          const file = new File([fileBlob], image.name, { type: fileBlob.type });
          const newPath = `/tableImages/${_this.userInfo.uid}/${_this.activeDate}/${newTableKey}/${image.name}`;
          _this.storage.upload(newPath, file);
        }
      })
  }
 async downloadFile(url: string): Promise<Blob> {
    const response = await fetch(url);
    return await response.blob();
  }

Access to fetch at 'https://firebasestorage.googleapis.com/*' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

我观看了本教程 https://www.youtube.com/watch?v=tvCIEsk4Uas 并更新了 CORS 权限，现在可以使用了。