NodeJS Express中Multer获取req.file为undefined的问题求助

核心问题原因 #

jQuery的serialize()方法只能序列化文本类型的表单数据，完全无法处理文件上传字段，这就是后端接收不到文件的根本原因。浏览器显示的fakePath是安全限制导致的正常现象，和文件能否上传无关，只要提交方式正确就能拿到真实文件数据。

前端修正方案 #

必须改用FormData对象封装表单数据，才能正确传递文件：

• 阻止表单默认提交行为
• 用FormData实例自动捕获表单所有字段（包括文件）
• AJAX请求时禁用默认的数据处理和Content-Type设置

示例代码：

$('form').submit(function(e) {
  e.preventDefault();
  const formData = new FormData(this); // 直接传入表单元素，自动包含所有字段
  
  $.ajax({
    url: '/adminposts/upload',
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery处理FormData
    contentType: false, // 让浏览器自动生成multipart/form-data头
    success: function(res) {
      console.log('上传成功', res);
    },
    error: function(err) {
      console.error('上传失败', err);
    }
  });
});

后端配置检查 #

确保Multer配置和路由使用完全匹配：

1. 确认multer.single()的参数和前端文件输入框的name属性一致（即image_post）
2. 如果用diskStorage，确保目标目录存在，否则Multer会报错导致req.file为undefined

示例后端代码：

const multer = require('multer');
// diskStorage配置示例
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/'); // 提前创建uploads目录
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

// 路由必须使用对应中间件，参数和前端name一致
app.post('/adminposts/upload', upload.single('image_post'), (req, res) => {
  console.log(req.file); // 现在应该能正常获取文件数据
  res.json({ status: 'success', file: req.file });
});

如果用memoryStorage，配置更简洁：

const upload = multer({ storage: multer.memoryStorage() });

额外注意事项 #

• 表单标签建议加上enctype="multipart/form-data"属性，虽然FormData会自动处理，但加上更严谨：

<form action="/adminposts/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="image_post" />
  <!-- 其他表单字段 -->
  <button type="submit">上传</button>
</form>

• 不要尝试用fakePath手动添加文件，new FormData(this)会自动处理真实的文件流

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