Javascript 图像预览与角度

我有以下问题：

我想使用

对上传的图像进行图像预览。 为此，我需要从输入中获取所有图像，这是没有问题的

我来了这么远：

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]);
            }
        });
    }

我知道如果我想解析多个图像，就必须使用数组。我只是想展示一个有效的例子。 问题是我只能在

onload

中声明变量。因此，当上传第二张图像时，所有内容都将被覆盖

我想这样做的原因是我可以像这样绑定到图像URL：

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

谢谢你的帮助。我希望有一个可行的解决方案。

我导入了DOMSanizer：

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>

Domsanizer确保您不会受到跨站点脚本攻击，例如，有人将URL传递给恶意JavaScript脚本，让代码在您的页面上执行。

请查看。可能存在重复的

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