Angular用FormData同时传文件和字符串，请求FormData为空如何解决

算力阿峰

2026-10-3

问题根因

你当前的错误用法是将FormData实例和序列化后的业务参数打包为普通JavaScript对象传递给HttpClient.post方法，Angular默认会将普通对象序列化为JSON格式提交，FormData实例在JSON序列化过程中会被转为空对象，自然后端无法收到上传的文件和参数。同时上传文件的POST请求必须直接提交FormData实例，不能包裹在其他对象中。

修复方案

将所有业务参数也添加到FormData实例中，直接传递FormData作为POST请求的请求体即可，Angular会自动识别并添加正确的multipart/form-data请求头，无需手动配置。

修正后的代码

trigger() {
  let element = document.getElementById('upload_file') as HTMLInputElement;
  element.click();
}

onChange(file: any) {
  this.FILE = file.files[0];
  this.fileName = file.files[0].name;
}

uploadDocument() {
  this.document = new Document();
  this.document.value= this.VALUE;
  // 其他赋值逻辑保持不变
  // ...

  // 序列化业务参数
  const documentStr = JSON.stringify(this.document);
  const formData: FormData = new FormData();
  // 追加文件
  formData.append('file', this.FILE, this.FILE.name);
  // 追加业务字符串参数，字段名可根据后端要求调整
  formData.append('document', documentStr);

  // 直接传递formData作为请求体，不要包裹在对象中
  return this.http.post(this.baseURL + '/rest/document/', formData).subscribe((data: any) => {
    this.connection.creating = false;
  })
}