Angular响应式表单：用户资料更新时无法将selectedImage传入FormData

你的问题核心在于你存到selectedImage里的只是文件的名称字符串，而FormData需要传入的是实际的File对象，这就是为什么无法正确传递图片数据的原因。下面是具体的修复步骤：

步骤1：修正selectedImage的类型与赋值 #

首先把selectedImage的类型从字符串改成File | undefined，然后在preview方法里直接保存选中的文件对象，而不是文件名：

// 在组件类中声明变量
selectedImage: File | undefined;

preview(event) {
  if (event.target.files.length > 0) {
    // 保存完整的File对象，而非仅文件名
    this.selectedImage = event.target.files[0];
    // 如果需要展示文件名，可以额外声明变量存储
    // this.imageFileName = event.target.files[0].name;
  }
}

步骤2：完善FormData的图片追加逻辑 #

在onSubmit方法里，先判断selectedImage是否存在，再将其追加到FormData中，避免传递undefined值：

onSubmit() {
  this.submitted = true;
  // 表单无效时直接返回
  if (this.updateForm.invalid) {
    return;
  }

  const formData = new FormData();
  // 仅当存在选中图片时才追加到FormData
  if (this.selectedImage) {
    formData.append('user_img', this.selectedImage);
  }
  formData.append('name', this.updateForm.get('name').value);
  formData.append('email', this.updateForm.get('email').value);
  formData.append('mobile', this.updateForm.get('mobile').value.internationalNumber);

  this.amen.updateUserProfile(formData).subscribe(
    (response) => { this.handleUpdateResponse(response); },
    (error) => { console.log('after update error', error); }
  );
}

额外提示：确保模板文件输入绑定正确 #

还要确认你的HTML模板中文件输入控件的绑定逻辑正确，示例如下：

<input type="file" (change)="preview($event)" accept="image/*" />

这样修改后，FormData就能正确携带图片文件数据，后端也能正常接收到对应的文件了。

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