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上传的所有图片。只有一个图像everthing工作正常。但我怎样才能得到所有这些？

当我输入多个图像时，我收到以下错误：

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

我知道如果我想要resolve多个图像，我必须使用数组。我只想展示一个有效的例子。问题是我只能在onload内声明变量。因此，在上传第二张图片时，所有内容都会被覆盖。

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

<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脚本以在您的页面上执行代码。

使用Angular进行图像预览

1 个答案: