Angular+Node(Multer)图片上传问题：后端正常前端无req.file

你遇到的核心问题是前端提交数据的格式错误，导致后端Multer无法识别到上传的文件。Postman测试正常是因为你在Postman里直接用了multipart/form-data格式提交表单和文件，但Angular代码里的处理方式不对——你把FormData作为newPost对象的一个属性，然后发送这个JSON对象，而Multer只能处理multipart/form-data类型的请求，无法从JSON里解析文件。

具体问题点 #

原来的前端代码中，你创建了formData存放文件，但又把这个formData塞进了newPost.image字段，然后发送整个newPost对象。这时候Angular会自动把newPost序列化为JSON格式，文件数据在JSON中无法被正确传递，后端收到的是JSON而非multipart/form-data，所以req.file为空。

修正步骤 #

1. 重构前端表单数据处理 #

把所有表单字段（文本+文件）都直接追加到FormData中，而不是嵌套在JSON对象里：

onSubmit(form: NgForm) { 
  const formData = new FormData(); 
  // 追加上传的文件（字段名'file'要和后端Multer配置一致）
  formData.append('file', this.image); 
  // 追加所有文本表单字段
  formData.append('title', form.value.title);
  formData.append('enterprise', form.value.enterprise);
  formData.append('type', form.value.type);
  formData.append('address', form.value.address);
  formData.append('date', new Date().toISOString()); // 把日期转成字符串方便后端解析
  formData.append('salary', form.value.salary);
  formData.append('experience', form.value.experience);
  formData.append('description', form.value.description);
  formData.append('email', '');
  // 如果tags是数组，建议转成JSON字符串传递
  formData.append('tags', JSON.stringify(form.value.tags));

  console.log(formData); 
  this.postService.createPost(formData).subscribe( 
    (data) => { console.log(data); }, 
    (err) => { console.log(err); } 
  ); 
}

2. 调整Angular服务的请求方式 #

确保服务发送的是FormData，不要手动设置Content-Type（浏览器会自动添加正确的multipart/form-data头和边界标识）：

// post.service.ts中的createPost方法
createPost(formData: FormData): Observable<any> {
  return this.http.post('/api/posts', formData);
}

3. 确认后端Multer配置正确 #

确保你的Multer中间件是针对file字段（和前端append的字段名一致），并且路由正确使用了这个中间件：

// 后端Multer配置示例
const multer = require('multer');
const path = require('path');

// 配置文件存储路径和文件名
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保uploads目录存在，不存在的话先创建
    cb(null, path.join(__dirname, '../uploads'));
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名避免冲突
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 只接受单个名为'file'的文件
const upload = multer({ storage: storage }).single('file');

// 路由中必须先使用upload中间件，再处理请求
router.post('/posts', upload, yourController.addPost);

4. 后端接收字段的小调整 #

如果你的tags是数组类型，后端需要把前端传递的JSON字符串转成数组：

module.exports.addPost = (req, res, next) => { 
  let newPost = new post({ 
    title: req.body.title, 
    enterprise: req.body.enterprise, 
    type: req.body.type, 
    address: req.body.address, 
    date: new Date(req.body.date), // 把字符串转成Date对象
    salary: req.body.salary, 
    experience: req.body.experience, 
    description: req.body.description, 
    email: req.body.email, 
    tags: JSON.parse(req.body.tags), // 解析JSON字符串为数组
    image: req.file.path, 
  }); 
  newPost.save((err, post) => { 
    if (err) return res.status(500).json({ errmsg: err }); 
    res.status(200).json({ msg: post }); 
  }); 
}; 

这样调整后，前端会以multipart/form-data格式提交所有数据，后端Multer就能正确解析出req.file，同时其他表单字段也能通过req.body获取到。

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