Javascript 错误[object object]-通过文件API上传Firebase存储文件

注意：在codesandbox.io中运行此命令

试图将文件上载到Firebase存储，但出现错误[object]。我能够成功地将内容写入FireStore，并确认

selectedFile

为file类型

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存储规则，这是一个403禁止的错误

在try-catch中没有捕获它，因为身份验证是一个承诺，在上传函数已经执行之后返回错误

一旦从CodeSandbox将错误带到本地计算机上，Chrome DevTools控制台inspeciton中捕获到异常。代码沙盒只显示错误消息error[object]

---

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

查看错误消息中的

[object object]

可能非常有用。您是否可以检查它是从何处记录的，并确保显示完整的消息（可能是

JSON.stringify

ing it if needed）？附带报告错误的堆栈的图像。因为它是在一个try-catch中，所以我认为它会捕获这个错误，但事实并非如此，因此我不确定JSON.stringify（）的位置/内容。注意：这是在CodeSandbox.io中运行的

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 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;