如何将文件与FormBuilder数据发送至后端？附尝试代码

我看了你写的代码，发现问题出在你把FormBuilder的表单数据通过HttpParams传递，而文件放在FormData里——这种分开传递的方式会让后端很难同时正确解析这两部分内容。文件上传场景下，所有数据（包括表单字段和文件）都应该放到FormData里统一发送，这样后端才能正常解析。

修正后的组件save方法 #

你需要把FormBuilder的表单值也追加到FormData中，而不是单独作为参数传递：

save(form: FormGroup) { 
  const uploadData = new FormData();
  // 追加选中的文件（如果存在）
  if (this.selectedFile) {
    uploadData.append('myFile', this.selectedFile, this.selectedFile.name);
  }
  // 遍历FormBuilder的所有表单字段，追加到FormData
  Object.keys(form.value).forEach(key => {
    uploadData.append(key, form.value[key]);
  });
  // 调用service的保存方法，只传入组装好的FormData
  this.professorService.save(uploadData).subscribe((data) => {
    if (data['success']) {
      // 这里编写操作成功后的逻辑
    }
  });
}

修正后的Servicesave方法 #

现在不需要HttpParams了，直接把FormData作为请求体发送即可，Angular的HttpClient会自动为FormData设置正确的Content-Type请求头：

save(formData: FormData) {
  return this.http.post(`${BE_API}/professor.php?action=save`, formData);
}

补充说明 #

• 后端接收时，需要从multipart/form-data类型的请求体中获取数据：比如PHP环境下，用$_FILES['myFile']获取上传的文件，用$_POST['字段名']获取对应的表单字段值。
• 如果你的FormBuilder表单包含嵌套对象或数组，需要额外处理（比如转成JSON字符串再append到FormData，后端再解析）；如果是普通键值对，上面的代码就足够使用。

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