错误 [object Object] - 通过 File API 上传 Firebase 存储文件答案

【问题标题】：Error [object Object] - Firebase Storage File Upload via File API错误 [object Object] - 通过 File API 上传 Firebase 存储文件
【发布时间】：2020-02-22 23:03:31
【问题描述】：

注意：在codesandbox.io中运行

尝试将文件上传到 Firebase 存储，但收到错误 [object Object]。我能够成功地向 FireStore 写入内容并确认 selectedFile 是文件类型。

import React, { useState, useEffect } from 'react';
import firebase from "./firebase"

function AddImage() {

        // Get a reference to the storage service, which is used to create references in your storage bucket
        var storage = firebase.storage();

        // Create a storage reference from our storage service
        var storageRef = storage.ref();

        var imageRef = storageRef.child('imageLogs/wtfd.png');
        //alert(imageRef);

  const uploadImage = () => {
    alert('In upload image');
    var selectedFile = document.getElementById('image').files[0];
    try {

      alert('In try');
      imageRef.put(selectedFile).then(function (snapshot) {
        setImage('Booyah');
        console.log('Uploaded a blob or file!');
      });
    }
    catch (err) {
      console.log(err);
      console.log(err.message);
        }
  }

  const [uploadedImage, setImage] = useState();

  return (
    <div>
      <input type="file" id="image" />
      <br />
      <input type="button" value="Add image" onClick={() => uploadImage()} />
      <br />
      <p>Uploaded Image: {uploadedImage}</p>
    </div>
  );
}

export default AddImage;

更新：

Firebase 存储中现有图像上的 .getDownloadUrl() 收到相同的错误消息：

import React, { useState, useEffect } from 'react';
import firebase from "./firebase"

function GetImage() {
        var storage = firebase.storage();

        var imageRef = storage.refFromURL('gs://XXXXX-XXXXX.appspot.com/imageLogs/preview.jpg');

  const getDownloadUrl = () => {
    try {
      imageRef.getDownloadURL().then(function(url) {
        setImageDownloadUrl(url);
      }
      );

    }
    catch (err) {
      console.log(err);
      console.log(err.message);
        }
  }

  const [imageDownloadUrl, setImageDownloadUrl] = useState();

  return (
    <div>
      <input type="button" value="Get Download Url" onClick={() => getDownloadUrl()} />
      <br />
      <p>Image Download Url: {imageDownloadUrl}</p>
    </div>
  );
}

export default GetImage;

firebase.js：

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "ZZZZZZZZ-XXXXXXXXX",
  authDomain: "XXXXX-XXXXXX.XXXX.com",
  databaseURL: "https://XXXXX-XXXXX.XXXX.com",
  projectId: "XXXXXXXXX-XXXXX",
  storageBucket: "XXXXXX-XXXXX.XXXXX.XXXX",
  messagingSenderId: "ZZZZZZ",
  appId: "1:XXXX:XXXXXXXXXX",
  measurementId: "G-XXXXX"
};

// Initialize Firebase
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}

export default firebase;

堆栈错误消息：

【问题讨论】：

看看你的错误消息中的[object Object]实际上是什么可能会很有帮助。你能检查它是从哪里记录的，并确保显示完整的消息（如果需要，可能JSON.stringifying）？
附有堆栈报告错误的图像。由于它处于尝试捕获中，我认为这会捕获此错误，但事实并非如此，话虽如此，我不确定 JSON.stringify() 的位置/内容。注意：这是在 CodeSandbox.io 中运行的

标签： javascript reactjs firebase react-hooks firebase-storage

【解决方案1】：

由于 Firebase 存储规则，这是一个 403 禁止错误。

在 try catch 中没有捕获到，因为身份验证是一个在上传函数执行后返回错误的承诺。

一旦从 CodeSandbox 带到本地计算机，就会捕获错误，并且在 Chrome DevTools 控制台检查中捕获异常。代码沙箱仅显示错误消息 Error [object Object]。

更新允许访问的存储规则后，CodeSandox 版本的存储库也可以正常工作。

【讨论】：