Firebase 存储：发生未知错误，请检查错误负载以获取服务器响应答案

【问题标题】：Firebase Storage: An unknown error occurred, please check the error payload for server responseFirebase 存储：发生未知错误，请检查错误负载以获取服务器响应
【发布时间】：2021-12-31 06:27:31
【问题描述】：

我正在尝试创建一个可将文件上传到 Firebase 存储的 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;

【问题讨论】：

firebaser here 如果这是您在过去几天创建的项目，您可能受到我们项目创建中的错误的影响。如果是这样，则该问题已得到解决，因此新项目将不再受到影响。要修复您现有的项目，请查看此处的步骤：stackoverflow.com/a/70060240
也发布在reddit.com/r/Firebase/comments/qz6u84/…

标签： typescript firebase vue.js firebase-storage

【解决方案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 Cloud Console 中缺少深奥的firebase-storage@system.gserviceaccount.com 权限。

要解决这个问题，请采取以下步骤：

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

这应该可以解决它！

【讨论】：