Angular中如何使用PUT请求上传图片并更新接口对应字段

核心问题原因 #

你当前的代码使用application/json格式提交数据，仅支持传输纯文本字段，无法传输二进制图片文件，所以即使传入图片路径也无法被后端识别处理。

具体修改步骤 #

1. 前端添加文件选择入口（组件HTML部分）

添加文件选择控件用来让用户选中要上传的图片：

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

在组件TS中存储选中的图片文件：

selectedPhoto: File | null = null;

handleFileSelect(event: Event) {
  const input = event.target as HTMLInputElement;
  if (input.files?.length) {
    this.selectedPhoto = input.files[0];
  }
}

2. 修改service请求代码

将提交格式改为FormData，同时删除手动配置的Content-Type请求头（浏览器提交FormData时会自动生成带边界标识的正确Content-Type，手动设置会导致上传失败）。
修改后的service代码如下：

individual1(About_Me: string, photo?: File) {    
  console.log("mf");    
  let url = this.mf + "rajperson/11/";    
  const dec = JSON.parse(localStorage.getItem('token') || '');
      
  this.hdrs = new HttpHeaders({    
    Authorization: "Token " + dec,    
    Accept: "application/json",
  })    
  // 构建FormData承载数据
  const formData = new FormData();
  formData.append('About_Me', About_Me);
  // 有传入图片时追加图片字段
  if (photo) {
    formData.append('About_Me_Photo', photo);
  }
  return this.http.put(url, formData, {headers: this.hdrs});
}

3. 组件中调用service方法

提交时同时传入文本内容和选中的图片即可：

submitData() {
  this.yourService.individual1(this.aboutMeText, this.selectedPhoto)
    .subscribe(res => {
      console.log('更新成功', res);
    })
}

注意事项 #

• 要确保后端PUT接口已经支持multipart/form-data格式的请求解析，并且字段名和你append到FormData里的键名一致
• 如果不需要修改文本仅修改图片，也可以单独传递图片字段，无需传About_Me

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