Question

我需要将化身字段的值更改为this.imageUrl，因为成功上传图像后返回的响应是服务器中的图像路径，然后是this.auth.updateUser(this.updateForm.value)中的所有用户详细信息发送更新用户，但问题是头像字段的值为null 我尝试了此操作，但没有成功this.updateForm.controls.avatar.setValue(this.imageUrl); 给出错误Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename

实际代码

ngOnInit() {
   this.updateForm = this.formBuilder.group({
   first_name: [this.userDetail.first_name],
   last_name: [this.userDetail.last_name],
   phone: [this.userDetail.phone],
   birth_date: [this.userDetail.birth_date],
   timezone: [this.userDetail.timezone],
   avatar: null
   })
}

onFileSelected(event) {
   this.selectedFile = <File>event.target.files[0];
}

onSubmit() {
   this.submitted = true;  
   const fd = new FormData();
   fd.append('avatar', this.selectedFile, this.selectedFile.name);
   this.auth.updateProfilePic(fd).subscribe((res: any)=>{
      this.imageUrl = res.data.file;
      console.log(this.imageUrl);
   },(err)=>{
      console.log(err);
   });


   this.auth.updateUser(this.updateForm.value).subscribe((res)=>{
      console.log(res);
   },(err)=>{
      console.log(err);
   });

HTML

<input type="text" name="first_name" formControlName="first_name" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="last_name" formControlName="last_name" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="phone" formControlName="phone" placeholder="Phone">
</div>
<div class="form-group">
<input type="text" name="birth_date" formControlName="birth_date" placeholder="Birth Date">
</div>
<div class="form-group">
<input type="text" name="timezone" formControlName="timezone" placeholder="timezone">
</div>
<div calss="form-group">
    <input (change)="onFileSelected($event)" type="file" name="avatar" accept="image/*" formControlName="avatar">
</div>
<button type="submit">Update</button>

Answer 1

上传图片后更新用户：

[Snapshotid]

如何更新文件输入字段的值

1 个答案: