Angular6: повторная загрузка одного и того же изображения не вызовет метод загрузки

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 = ''.