Firebase 存储：发生未知错误，请检查服务器响应的错误负载

Question

我正在尝试创建一个将文件上传到 Firebase Storage 的 Vue Composable。

为此，我使用模块化 Firebase 9 版本。

但我当前的代码没有上传任何内容，而是返回此错误：FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)

由于这个错误已经来自我的，console.log("ERROR", err);我不知道还能在哪里寻找解决方案。

我的代码是使用 TypeScript 实现的，以防万一。

import { projectStorage } from "@/firebase/config";
import { ref, watchEffect } from "vue";
import {
  ref as storageRef,
  uploadBytesResumable,
  UploadTaskSnapshot,
  UploadTask,
  getDownloadURL,
  StorageError,
} from "firebase/storage";

const useStorage: any = (file: File) => {
  const error = ref<StorageError | null>(null);
  const url = ref<string | null>(null);
  const progress = ref<number | null>(null);
  watchEffect(() => {
    // references
    const storageReference = storageRef(projectStorage, "images/" + file.name);
    // upload file
    const uploadTask: UploadTask = uploadBytesResumable(storageReference, file);
    // update progess bar as file uploads
    uploadTask.on(
      "state_changed",
      (snapshot: UploadTaskSnapshot) => {
        console.log("SNAPSHOT", snapshot);
      },
      (err) => {
        error.value = err;
        console.log("ERROR", err);
      },
      async () => {
        // get download URL & make firestore doc
        const downloadUrl = await getDownloadURL(storageReference);
        url.value = downloadUrl;
        console.log("DOWNLOADURL", downloadUrl);
      }
    );
  });
  return { progress, url, error };
};
export default useStorage;

Answer 1

首先转到存储、规则选项卡并更改允许读取、写入：如果为 false；为真；如下图所示。

rules_version = '2';
service firebase.storage {
    match /b/{bucket}/o {
        match /{allPaths=**} {
            allow read, write: if true;
    }
  }
}

Answer 2

控制台错误还不够。它没有提供足够的信息。

POST 400查看控制台错误时，您需要单击控制台中显示的另一个红色错误。这将带您进入“网络”选项卡。从那里向下滚动并单击令人讨厌的红色错误。这最终应该会向您显示一条更有用的错误消息，内容如下：

没有权限。请访问 Firebase 控制台中的“存储”选项卡，为您的存储桶启用 Firebase 存储，并确保您有足够的权限来正确配置资源。

这可能会让您认为应该归咎于您的 Firebase 存储规则。在继续之前，您应该仔细检查这些规则，但更可能的问题是您firebase-storage@system.gserviceaccount.com在 Google Cloud Console 中缺少深奥的权限。

要解决此问题，请执行以下步骤：

1. 转到https://console.cloud.google.com
2. 在顶部蓝色栏中选择您的项目（您可能需要切换到“全部”选项卡才能查看您的 Firebase 项目）
3. 向下滚动左侧菜单并选择“云存储”
4. 选择您的所有存储桶，然后单击右上角的“权限”
5. 点击“添加主体”
6. 将“firebase-storage@system.gserviceaccount.com”添加到“新原则”框中，并赋予其“存储管理员”角色并保存

那应该解决它！