Question

我想将图像上传到我的angular6网站上并显示它，此代码可以很好地工作。

HTML：

<img #signatureImage src="{{imageSrc}}">
<input hidden type="file" #file (change)="uploadImage($event)"/>

TypeScript：

@ViewChild('signatureImage') img: ElementRef;

...

uploadImage(input) {
  if (input.target.files && input.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (e) => {
      this.imageSrc = e.target.result;
    };

    reader.readAsDataURL(input.target.files[0]);
  }
}

删除图像（imageSrc = ''）并重新上传同一文件后，不会触发(change)="uploadImage($event)"，因为该文件没有“更改”的值或类似的值。结果是，选择同一文件时什么也没发生。

那么Angular6中是否有另一种方法可以调用我的方法，而不必两次选择相同的图像？

Answer 1

好的，我找到了一个简单的解决方案。

<input hidden type="file" #file
 (change)="uploadImage($event); file.value = ''">

选择完图像后，您可以直接重置路径，即从中选择图像，因此再次重新上传同一图像时，(change)方法仍会触发。我只需要添加file.value = ''。

Angular6：重新上传相同的图片不会触发上传方法

1 个答案: