我来帮你一步步搞定这个问题，从请求体为空的根源到完整实现图片上传Firebase的流程：

1. 为什么请求体是空的？ #

你的客户端代码直接把JS对象作为fetch的body参数，这是核心错误：

• fetch不会自动把JS对象序列化为JSON，也不会主动设置Content-Type: application/json头，导致服务器的express.json()中间件根本解析不了请求体，自然req.body是空对象。
• 更关键的是，上传图片不能用JSON格式，必须用multipart/form-data类型，也就是通过FormData来封装文件数据。

2. 客户端代码修正 #

修改你的postImage函数，用FormData来封装图片文件：

const postImage = async (imageFile) => {
  console.log(imageFile); // 确认传入的是File对象
  const formData = new FormData();
  formData.append("image", imageFile); // "image"是字段名，后端会通过这个名字获取文件

  try {
    const response = await fetch("http://localhost:3000/postImage", {
      method: "POST",
      body: formData // 不需要手动设置Content-Type，浏览器会自动处理
    });
    const data = await response.json();
    console.log("上传成功", data);
  } catch (error) {
    console.error("上传失败", error);
  }
};

3. 服务器端处理文件上传 #

Express本身不支持处理文件上传，需要用multer中间件（这是处理multipart/form-data请求的标准方案），同时集成Firebase Storage：

步骤3.1 安装依赖 #

npm install multer firebase-admin

步骤3.2 初始化Firebase Admin #

在项目里创建firebase-config.js（替换成你的Firebase服务账户密钥信息）：

const admin = require("firebase-admin");
const serviceAccount = require("./path-to-your-service-account-key.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  storageBucket: "your-bucket-name.appspot.com" // 替换成你的Storage桶名称
});

const bucket = admin.storage().bucket();
module.exports = bucket;

步骤3.3 修改服务器和路由代码 #

更新主服务器文件，添加multer配置：

const express = require("express");
const morgan = require("morgan");
const cors = require("cors");
const multer = require("multer");
const app = express();

// Settings
app.set('port', process.env.PORT || 3000);
app.set('json spaces', 4);

// Middleware
app.use(morgan("dev"));
app.use(cors({origin: "http://localhost:3001"}));
// 注意：上传文件不需要express.json()和urlencoded，multer会专门处理multipart/form-data
const upload = multer({ storage: multer.memoryStorage() }); // 将文件暂存到内存，方便直接上传到Firebase

// Routes
app.use(require("./routes/index")(upload)); // 把multer实例传给路由

app.listen(app.get('port'), () => {
  console.log("Server using port " + app.get('port'));
});

更新路由文件，处理文件上传并传到Firebase Storage：

const { Router } = require('express');
const bucket = require("../firebase-config");

module.exports = (upload) => {
  const router = Router();

  router.post('/postImage', upload.single("image"), async (req, res) => {
    try {
      if (!req.file) {
        return res.status(400).json({ error: "No image file provided" });
      }

      // 准备上传到Firebase的文件
      const file = bucket.file(`uploads/${Date.now()}_${req.file.originalname}`);
      const stream = file.createWriteStream({
        metadata: {
          contentType: req.file.mimetype
        }
      });

      // 处理流的事件
      stream.on("error", (err) => {
        console.error(err);
        return res.status(500).json({ error: "Failed to upload image to Firebase" });
      });

      stream.on("finish", async () => {
        // 获取文件的公开访问URL（如果需要公开访问的话）
        await file.makePublic();
        const publicUrl = `https://storage.googleapis.com/${bucket.name}/${file.name}`;
        
        return res.status(200).json({
          message: "Image uploaded successfully",
          imageUrl: publicUrl,
          fileDetails: req.file
        });
      });

      // 写入文件流
      stream.end(req.file.buffer);
    } catch(error) {
      console.error(error);
      return res.status(500).json({ error: error.message });
    }
  });

  return router;
};

4. 关键注意点 #

• 不要用express.json()或express.urlencoded()处理文件上传请求，multer会专门处理multipart/form-data类型的请求。
• 使用multer.memoryStorage()可以将文件暂存到内存，避免在服务器本地创建临时文件，适合直接上传到云存储。
• 确保你的Firebase服务账户密钥有Storage的写入权限，并且桶的规则允许上传（可以先设置为公开测试，之后再调整为安全规则）。

内容的提问来源于stack exchange，提问作者Jorge Sánchez