相同的图像在本地删除后第二次没有上传

Question

我正在尝试在本地删除图像

 <input type="file" id="profileUrl" (change)="PicUpload($event)" name="profilePic">


PicUpload(e): void {
    this.imageChangedEvent = e;
    this.image  = e.target.files[0];
  }

预览：

 <img [attr.src]="user.photo" />

当我从本地服务器中删除此图像时

removePic(photo) {
      this.user.photo = '/assets/images/default-profile.png';
      this.fileName = '';
      this.image = '';
      this.imageChangedEvent = '';
      document.getElementById("profileUrl").innerHTML = " ";
    }

然后，当我尝试再次上传相同的图像时，它不会在预览中显示它，我必须在上传该图像之前上传另一张图像，然后它会在预览中显示。图片预览为base64格式

任何解决方案谢谢

Answer 1

你可以试试：

<input #profileUrl type="file" id="profileUrl" (change)="PicUpload($event)" name="profilePic">

在ts文件中：

@ViewChild('profileUrl') profileUrl;

removePic(photo) { 
  ...
  this.profileUrl.nativeElement.value = '';
}