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

Question

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

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

但是我当前的代码没有上传任何东西，而是returns这个错误：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

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

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

Permission denied. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources.

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

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

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

应该可以解决！

Answer 2

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

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

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

Firebase Storage: An unknown error occurred, please check the error payload for server response

firebase

typescript

vue.js

firebase-storage