尝试将文件上传到 firebase 存储但它不起作用。错误对象为空，我如何找出问题所在？

Question

所以我正在尝试使用文件类型输入元素将我的用户上传的图像文件发送到 firebase 存储。像这样：

<input
className={inputStyle}
{...register("donorPhotoFile")}
type="file"
accept=".png, .jpg,.jpeg"
></input>

因此，当我尝试 console.log 该输入的返回值时，我得到了一个具有以下属性的对象：

name: "file_name.jpg",
size: ,
type: "image/png"
webkitRelativePath: ""

/api/firebase 是我在 next.js 中的 api 端点，用于将我的表单数据上传到 firestore。从 firebase 文档中，'file' 应该来自我做过的文件 API，但它总是不成功，我不确定我做错了什么。

  const submitForm = async (data) => {
    const  imageFile = data.donorPhotoFile[0] //this is the file 

    const imageUpload = await fetch("/api/firestorage", {
      method: "POST",
      body: imageFile
    });

    const res = await imageUpload.json()
    console.log(res)
 }
 
 //in my firestorage endpoint  i've done this:
 
 const storage = getStrorage(app) //app here is an instance of my firebase initialized
 
 const handler =  async (req, res) => {
  const storageRef= ref(storage) 
  const imageFile = req.body
  
  try {
    uploadBytes(storageRef, imageFile);
    res.status(200).json({statusRes: "success"})
  } catch(error) {
    res.status(400).json({statusRes: "failed", errorMessage: error})
  }
 }

这样做 returns 一个 storage/invalid-root-operation 错误代码和一条消息：

"Firebase Storage: The operation 'uploadBytes' cannot be performed on a root reference, create a non-root reference using child, such as .child('file.png')

因此尝试引用特定文件并将文件名作为第二个参数插入到 storageRef 中，如下所示：

const storageRef = ref(storage).child(`images/${req.body.name}`)

但它仍然无法正常工作，但现在我得到一个空的错误对象，所以我现在无法弄清楚出了什么问题。所以我实际上尝试检查 req.body 是什么，它返回了这个： file object in my api endpoint

我不明白为什么会这样？我实际上在看什么？我在 post 请求中发送的是一个文件对象。像这样： File object i attached to my post request

Answer 1

您可以使用模块化 SDK 创建对路径的引用，如下所示：

const storageRef= ref(storage, `images/${req.body.name}`)

.child() 方法用于较旧的 name-spaced 语法。

尝试将文件上传到 firebase 存储但它不起作用。错误对象为空，我如何找出问题所在？

Trying to upload files to firebase storage but its not working. Error object is empty, how do I figure out what's wrong?

firebase

reactjs

firebase-storage

next.js