Node中Unexpected end of form错误的问题分析及解决方案

// ❌ 错误的请求方式（JSON 数据，但后端期望 FormData）
fetch("/api/upload", {
  method: "POST",
  body: JSON.stringify({ name: "test" }), // 不是 FormData
  headers: { "Content-Type": "application/json" },
});

// ✅ 正确的 FormData 请求
const formData = new FormData();
formData.append("file", fileInput.files[0]);
fetch("/api/upload", {
  method: "POST",
  body: formData, // 浏览器会自动设置 Content-Type: multipart/form-data
});

const express = require("express");
const multer = require("multer");
const upload = multer(); // 不存储到磁盘，仅解析

const app = express();

// ❌ 删除全局中间件
// app.use(upload.any());

// ✅ 仅在需要文件上传的路由使用 Multer
app.post("/upload", upload.single("file"), (req, res) => {
  console.log(req.file); // 上传的文件
  res.send("上传成功");
});

// 普通 JSON 请求不会受影响
app.post("/api/data", (req, res) => {
  res.json({ message: "OK" });
});

// 前端代码示例（React/Axios）
const formData = new FormData();
formData.append("file", file); // 确保字段名和 Multer 配置一致

axios.post("/api/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data", // 浏览器通常会自动设置，但可以手动加
  },
});

app.post("/upload", upload.single("file"), (req, res) => {
  // 成功处理
}, (err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    return res.status(400).json({ error: "文件上传错误" });
  } else if (err) {
    return res.status(500).json({ error: "服务器错误" });
  }
  next();
});

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryXXXX

# 正确上传文件
curl -X POST -F "file=@test.jpg" http://localhost:3000/upload

# 错误示例（发送 JSON 数据）
curl -X POST -H "Content-Type: application/json" -d '{"name":"test"}' http://localhost:3000/upload