NodeJS+Angular使用Multer上传图片时req.file为undefined问题求助

问题根因 #

前端提交数据时未使用FormData格式传输文件，Multer仅能解析multipart/form-data类型的请求中的文件内容，你当前直接提交JSON格式的表单值，文件不会被正确传输到后端，因此req.file始终为undefined。

对应修改方案 #

1. 修正组件FormGroup定义

你在onFileSelect中给image字段赋值，但FormGroup中未声明该控件，调整ngOnInit中的表单定义：

ngOnInit(): void {
  this.postForm = new FormGroup({
    postTitle: new FormControl(null),
    postAuthor: new FormControl(null),
    postContent: new FormControl(null),
    image: new FormControl(null) // 新增对应文件字段
  });
}

2. 改写提交逻辑，使用FormData传输数据

修改onBlogSubmit方法，将表单内容封装为FormData：

onBlogSubmit() {
  const formData = new FormData();
  formData.append('postTitle', this.postForm.value.postTitle);
  formData.append('postAuthor', this.postForm.value.postAuthor);
  formData.append('postContent', this.postForm.value.postContent);
  formData.append('image', this.postForm.value.image); // 字段名需与后端upload.single('image')的参数完全一致

  this.postService.addPost(formData).subscribe(
    data => {     
      this.flashMessage.show('Blog Submitted Successfully', {cssClass: 'alert-success', timeout: 3000});
      this.router.navigate(['/blog-page']);
    },
    error => {
      this.flashMessage.show('Something Went Wrong', {cssClass: 'alert-danger', timeout: 3000});
    }
  );
}

3. 调整Angular请求服务

不需要手动设置Content-Type头，Angular发送FormData时会自动生成带正确boundary的multipart/form-data头，手动设置会导致解析失败：

addPost(postData: FormData): Observable<post> {
  this.loadToken();
  const head = this.headers.append("Authorization", this.authToken);
  return this.http.post<post>(this.baseUri + "/newPost", postData, { headers: head });
}

4. 修正HTML模板

去掉重复的提交触发逻辑，避免重复请求：

<form [formGroup]="postForm" (ngSubmit)="onBlogSubmit()">
  <!-- 其余表单内容不变 -->
  <button type="submit" class="btn btn-primary">Save</button> <!-- 移除按钮上的click事件 -->
</form>

5. 修正后端Multer配置

你当前设置的fieldSize是普通表单字段的大小限制，文件大小限制需改为fileSize：

const upload = multer({
  storage: storage,
  limits: { fileSize: 10 * 1024 * 1024 } // 单文件最大10M
});

同时确保项目根目录下存在public文件夹，Multer不会自动创建不存在的目录，会导致上传失败。

验证方式 #

提交请求后在浏览器控制台的「网络」 tab 查看对应请求：

• 请求头的Content-Type应为multipart/form-data; boundary=xxx格式
• 请求Payload为FormData格式，包含image字段和对应的文件内容

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