Предварительный просмотр изображения с Angular

Question

У меня следующая проблема:

Я хочу сделать предварительный просмотр загруженных изображений с помощью <input type="file">.Для этого мне нужно получить все изображения с входа, что не проблема.

Я дошел до:

async handleFileInput(event: any) {

      this.filesToUpload = event.target.files;

        let test = await this.images(event);
        this.fileUrl = test;       
    }

    async images(event)
    {
        var reader = new FileReader();
        return new Promise<any>((resolve, reject) => {
            for (var i = 0; i < event.target.files.length; i++)
            {
               reader.onload = (event: any) => {
                    var data = event.target.result;
                    resolve(data);
                };
                reader.readAsDataURL(event.target.files[i]);
            }
        });
    }

Но я не могу узнать, какполучить все изображения, которые были загружены с Promise.Только с одним изображением все работает нормально.Но как я могу получить их все?

Когда я ввожу более одного изображения, я получаю следующую ошибку:

 Uncaught (in promise): InvalidStateError:
 An attempt was made to use an object that is not, or is no longer, usable

Я знаю, что мне нужно использовать массив, если я хочу resolve более одного изображения.Я просто хотел показать рабочий пример.Проблема в том, что я могу объявлять переменные только внутри onload.Поэтому все будет перезаписано при загрузке второго изображения.

Причина, по которой я хочу это сделать, заключается в том, что я могу привязать URL-адреса к изображениям следующим образом:

<div *ngFor="let fileUrl of fileUrls">
    <img [src]="fileUrl">
</div>

Спасибо затвоя помощь.Я надеюсь, что есть рабочее решение.

Answer 1

Я импортирую DomSanitizer:

import { DomSanitizer } from '@angular/platform-browser';

Добавьте его в конструктор:

constructor(
     public sanitizer: DomSanitizer
){}

Затем зациклите массив файлов следующим образом:

<div *ngFor="let fileUrl of fileUrls;let i=index">
      <img *ngIf="fileUrl[i]"[src]="sanitizer.bypassSecurityTrustUrl(fileUrl[i])">
 </div>

DomSanitizerгарантирует, что вы не открыты для взлома межсайтовых сценариев, например, если кто-то передает URL вредоносному сценарию JavaScript для выполнения кода на вашей странице.