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

Question

我正在尝试创建一个将文件上传到 Firebase 存储的 Vue 可组合项。

为此，我使用了模块化的 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;

原文由 TinyTiger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

1. 转到 https://console.cloud.google.com
2. 在顶部蓝色栏中选择您的项目（您可能需要切换到“全部”选项卡才能查看您的 Firebase 项目）
3. 向下滚动左侧菜单并选择“云存储”
4. 选择所有存储桶，然后单击右上角的“显示信息面板”
5. 点击“添加主体”
6. 将“[e-mail]”添加到 New Principle 框中并赋予其“Storage Admin”角色并保存

那应该解决它！

原文由 TinyTiger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先转到 Storage，Rules 选项卡并更改 allow read, write: if false;为真；如下图所示。

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

原文由 Ibrahim Kelly 发布，翻译遵循 CC BY-SA 4.0 许可协议