Angular对接Node.js multer上传文件时req.file返回undefined如何解决

• 校验前端FormData字段名与multer配置是否匹配
  你当前multer配置为.single('file')，要求前端FormData对象追加文件时的键必须严格为file，拼写大小写错误、多空格都会导致multer识别不到文件，返回undefined。
• 检查Angular请求头配置
  发送包含文件的请求时，不要手动设置Content-Type请求头。只要请求体传入的是FormData实例，浏览器会自动生成带boundary参数的multipart/form-data类型请求头，手动指定会导致boundary缺失，multer无法解析文件。
  正确的TS上传示例：

  // 假设fileInput是你获取到的File对象
  const formData = new FormData();
  formData.append('file', fileInput);
  // 直接传formData，不要额外加headers配置
  this.http.post('/api/test', formData).subscribe(res => console.log(res));
  

• 确认前端没有序列化文件对象
  从你的控制台输出{ file: {} }可以看出，当前请求体里的file是个空对象，大概率是你直接把File对象放到了普通JSON请求体里，JS序列化File对象会得到空对象。必须用FormData包裹文件，不能直接传JSON格式的请求体。
• 检查multer目标存储目录是否存在
  multer不会自动创建不存在的目录，你配置的存储路径为files，需要先在项目根目录手动创建files文件夹，或者在destination回调中用fs.mkdir自动创建不存在的目录，否则multer会跳过文件解析。
• 排查中间件加载顺序
  如果你的全局中间件先加载了express.json()、express.urlencoded()，这两个中间件会先消费请求体，导致multer无法拿到原始的文件流。要保证multer中间件的执行顺序在这两个解析中间件之前，或者上传路由不使用这两个全局解析中间件。
• 修复路由内的报错问题
  你当前的路由回调是async函数但没有异常捕获，也没有返回响应，需要补充逻辑避免后续报错：

  router.post('/test', upload, async(req, res, next) => {
    try {
      console.log(req.body)
      console.log(req.file)
      res.status(200).json({msg: '上传成功', file: req.file})
    } catch (err) {
      next(err)
    }
  });
  

内容的提问来源于stack exchange，提问作者Lørd Rhétice AÏNON