Firebase Storage TypeError: file.getBlob is not a function

Firebase Storage TypeError: file.getBlob is not a function

在我的应用程序中,我想从 Firebase 存储下载文件(.pdf 和 .xls)。

我可以使用 ref.getDownloadURL() 生成下载 link,但是 link 会导致浏览器在下载或打开目标文件之前打开一个新选项卡。

为了避免这种行为,我可以使用 res = await fetch([the download URL]) 下载 javascript 中的文件,然后 await res.blob()

这很好用:

 const res = await fetch([downloadURL]);
 const blob = await res.blob();     
 const url = URL.createObjectURL(blob);
 const anchor = document.createElement("a");
 anchor.href = url;
 anchor.download = [file_name];  // e.g. my_file.xls
 anchor.click();

但是,documentation 建议我可以使用 getBlob()

通过 SDK 直接 下载 blob

我已尝试下载存储桶中的文件列表并循环访问这些文件以获取 blob,如下所示:

const storageRef = storage.ref().child("my_files");      
const list = await storageRef.listAll();   
const blob_array = await Promise.all(
  list.items       
    .map(async (file) => {
      const blob= await file.getBlob();
      return {
        name: file.name,
        blob: blob,
       };
     })
   );

但是,我得到一个错误:

TypeError: file.getBlob is not a function

getBlob()documentation 状态:

To use this functionality, you have to whitelist your app's origin in your Cloud Storage bucket. See also https://cloud.google.com/storage/docs/configuring-cors

为了对此进行测试,我遵循了参考文档,并使用 gsutil 为我的存储桶设置了 CORS 策略,如下所示:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

我认为这会产生 'whitelisting' 我的应用程序来源的效果(根据 getBlob() 文档),但我仍然收到如下错误:

TypeError: file.getBlob is not a function

如何启用此 getBlob() 功能?

问题正是错误所述 - 您正试图在没有该方法的对象上调用 getBlob。

首先,请查看 downloading files. It states that since SDK version 9.5 there is a global getBlob function. You're not using a new enough version of the SDK to get that function. You're using the old version 8, and Reference objects don't have a getBlob method (scan the API documentation v8 for Reference 的文档,但您不会看到它)。

如果您想使用 getBlob,则必须 upgrade to the v9 SDK 并重写所有 Firebase 代码以符合新的 API。然后你就可以使用新的getBlob了。