Как обработать картинку?

Question

[olya_097]

Есть input file. После выбора картинки ( локально) её не видно на странице.
Как это исправить?

https://stackblitz.com/edit/angular-hello-world-bv...

Answer 1

[Yuriy Vorobyov]

Необходимо воспользоваться FileReader

На основе вашего кода, обработку файла можно изменить во что-то такое:

handleFile(event: any) {
    const file = event.target.files[0];

    if (file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        file.imageSrc = reader.result
      }

      reader.readAsDataURL(file);

      this.files.push(file);
      this.fileName = file.name;
    }
}

Также необходимо поменять html:

<div *ngFor="let file of files">
  <img [src]="file.imageSrc" />
</div>