Node.js Multer上传器：HTML表单正常，脚本请求报req.file undefined

我之前也踩过一模一样的坑！用原生HTML表单上传完全正常，但换成AngularJS的$http或者其他脚本方式就报错req.file is undefined，核心原因是脚本上传没有模拟原生表单的multipart/form-data请求格式，导致Multer识别不到文件。

问题根源 #

原生表单提交时，浏览器会自动完成两件关键的事：

1. 生成包含boundary分隔符的Content-Type头（比如multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW）
2. 把文件数据按照multipart规范封装成正确的格式

而AngularJS的$http默认不会做这些处理，直接传文件的话，请求格式不符合Multer的解析要求，自然拿不到req.file。

解决方案：用FormData模拟原生表单 #

不管是AngularJS还是其他脚本上传，核心都是用FormData对象来包装文件数据，并且让浏览器自动生成正确的请求头。

1. AngularJS 具体实现

先写前端控制器代码：

app.controller('UploadCtrl', function($scope, $http) {
  $scope.handleUpload = function() {
    // 获取选中的文件
    const fileInput = document.getElementById('userFile');
    const selectedFile = fileInput.files[0];
    if (!selectedFile) {
      alert('请先选择文件！');
      return;
    }

    // 用FormData包装文件，字段名要和后端Multer配置一致
    const formData = new FormData();
    formData.append('userFile', selectedFile);

    // 发起POST请求，关键配置transformRequest和headers
    $http.post('/upload', formData, {
      transformRequest: angular.identity, // 禁止Angular自动序列化数据
      headers: {'Content-Type': undefined} // 让浏览器自动生成正确的Content-Type头
    })
    .then(res => {
      console.log('上传成功:', res.data);
    })
    .catch(err => {
      console.error('上传失败:', err);
    });
  };
});

对应的HTML可以改成按钮触发（如果不用原生submit）：

<form id="uploadForm">
  <input type="file" id="userFile" name="userFile" />
  <button type="button" ng-click="handleUpload()">Upload File</button>
</form>

2. 后端Multer配置确认

确保你的Multer配置和前端字段名完全匹配，比如：

const multer = require('multer');
const path = require('path');

// 配置存储路径和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, path.join(__dirname, 'uploads')); // 确保uploads目录已创建
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 注意这里的'single'参数要和前端FormData的字段名一致
const upload = multer({ storage: storage }).single('userFile');

// 上传路由
app.post('/upload', upload, (req, res) => {
  if (!req.file) {
    return res.status(400).send('未检测到上传的文件');
  }
  res.send(`文件上传成功：${req.file.filename}`);
});

3. 其他脚本上传的通用注意事项

如果用fetch或者XMLHttpRequest，同样遵循这两个规则：

• 用FormData包装文件
• 不要手动设置Content-Type头

举个fetch的例子：

const file = document.getElementById('userFile').files[0];
const formData = new FormData();
formData.append('userFile', file);

fetch('/upload', {
  method: 'POST',
  body: formData // 直接传FormData，浏览器自动处理请求头
})
.then(res => res.text())
.then(data => console.log(data))
.catch(err => console.error(err));

关键总结 #

• 必须用FormData模拟原生表单的请求结构，字段名前后端要完全一致
• 绝对不要手动设置Content-Type: multipart/form-data，否则会丢失boundary分隔符，Multer无法解析文件
• 确保后端的Multer配置正确，比如.single()的参数和前端字段名匹配

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