Node.js学习：HTML带图片上传表单POST至Express后端时request.body为空的问题求助

你的核心问题出在前端错误处理了FormData并以JSON格式发送数据，同时后端的multer配置没有匹配你的表单字段结构，导致request.body为空。下面一步步帮你修复：

1. 修复前端表单提交逻辑 #

你之前把FormData转成JSON，还把文件对象替换成了文件名，这不仅丢失了实际的文件内容，还让后端无法解析multipart/form-data类型的请求。直接发送原始FormData即可，fetch会自动处理正确的请求头：

async function handleForm(e) {
  e.preventDefault();
  const dataForm = new FormData(e.target);
  
  try {
    const res = await fetch(file_api, {
      method: 'POST',
      body: dataForm // 直接传递FormData实例，无需转JSON
    });
    const data = await res.json();
    console.log('请求响应:', data);
  } catch (err) {
    console.error('API请求失败:', err);
  }
}

2. 调整后端multer配置与路由 #

body-parser无法处理multipart/form-data类型的请求，必须依赖multer。另外你表单中有两个不同名的文件字段（image_backup和image_banner），需要用upload.fields()来处理，而不是upload.array()（后者用于多个同名文件）。

第一步：配置multer存储（可选但推荐） #

如果需要把上传的文件保存到磁盘，先配置存储路径：

// 后端主文件修改multer部分
const multer = require('multer');
// 配置磁盘存储，指定文件保存目录和文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保public/uploads目录存在，否则手动创建
    cb(null, 'public/uploads');
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重复
    const uniqueName = `${file.fieldname}-${Date.now()}-${Math.round(Math.random() * 1E9)}.${file.originalname.split('.').pop()}`;
    cb(null, uniqueName);
  }
});
const upload = multer({ storage: storage });

// 如果只需要在内存中处理文件（不保存到磁盘），可以用默认配置：
// const upload = multer();

第二步：修改路由使用multer中间件 #

在路由中指定要处理的文件字段：

// route.js 修改
router.post('/file', upload.fields([
  { name: 'image_backup' },
  { name: 'image_banner' }
]), replaceValue);

3. 更新控制器获取数据 #

现在request.body会包含所有文本输入字段，request.files会包含上传的文件信息：

// fileController.js 修改
const replaceValue = (request, response) =>{
  console.log('文本字段:', request.body);
  console.log('上传文件:', request.files);
  
  // 可以在这里根据业务需求处理文件，比如返回文件路径
  response.json({
    textFields: request.body,
    uploadedFiles: request.files
  });
}

为什么之前的代码无效？ #

• 前端将FormData转为JSON发送，后端的body-parser只能解析JSON或urlencoded格式，但文件上传需要multipart/form-data，而JSON无法承载文件内容
• 你替换了文件对象为文件名，导致后端完全接收不到实际的文件数据
• 后端使用的upload.array()是处理多个同名文件的，不匹配你表单中两个不同名的文件字段

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