部署Cloud Functions后用Multer传图报TypeError问题求助

核心问题分析 #

报错TypeError: Cannot read properties of undefined (reading 'originalname')说明req.file是undefined，即Multer没有成功解析到前端上传的文件。本地正常但部署后失效，主要是前端请求头配置和Cloud Functions环境下的请求处理逻辑冲突导致的。

修复步骤及代码修改 #

1. 移除Axios手动设置的Content-Type头 #

前端手动指定"Content-Type": "multipart/form-data"会丢失请求所需的boundary参数，Axios会自动根据FormData生成包含boundary的正确请求头，无需手动配置。

修改后的前端代码：

async onUpload() {
  if (!this.image) {
    alert("Please select an image to upload.");
    return;
  }

  const image = new FormData();
  image.append("image", this.image);

  try {
    const response = await axios.post(
      "https://us-central1-car-hub-130b6.cloudfunctions.net/api/upload",
      image
      // 移除手动设置的headers配置
    );
    alert("Image uploaded successfully");
    console.log(response.data);
  } catch (error) {
    console.error("Upload Error:", error);
    alert("Error uploading image");
  }
},

2. 后端新增文件存在性判断 #

在使用req.file前增加校验，避免因解析失败导致的崩溃，并返回明确的错误信息。

修改后的后端代码：

router.post("/", upload.single("image"), async (req, res) => {
  try {
    const file = req.file;
    // 新增校验：如果未解析到文件，直接返回400错误
    if (!file) {
      return res.status(400).send("No valid file uploaded");
    }
    
    const bucket = admin.storage().bucket();
    const blob = bucket.file("car_images/" + file.originalname);
    const blobStream = blob.createWriteStream();

    blobStream.on("error", (err) => {
      console.error(err);
      res.status(500).send("Failed to save file to storage");
    });

    blobStream.on("finish", () => {
      const publicUrl = `https://firebasestorage.googleapis.com/v0/b/${
        bucket.name
      }/o/${encodeURI(blob.name)}?alt=media`;

      res.status(200).send(publicUrl);
    });

    blobStream.end(file.buffer);
  } catch (error) {
    console.error(error);
    res.status(500).send(error.message);
  }
});

3. 检查Express主入口的body parser配置 #

确保在Cloud Functions的Express主文件中，不要添加express.json()或express.urlencoded()这类通用body parser，否则会提前解析multipart/form-data请求体，导致Multer无法处理。

主入口示例（正确写法）：

const functions = require("firebase-functions");
const express = require("express");
const app = express();
const uploadRouter = require("./routes/upload");

// 不要添加express.json()/express.urlencoded()
app.use("/upload", uploadRouter);

exports.api = functions.https.onRequest(app);

额外检查点 #

• 确认Multer实例的配置无冲突，比如不要设置和前端字段名不一致的参数；
• 如果上传大文件，可在Cloud Functions控制台将内存配置从默认256MB调整为512MB；
• 验证Firebase Storage的读写权限配置（你的当前规则已经放开所有权限，无需修改）。

内容的提问来源于stack exchange，提问作者fowik