Angular 如何在使用ng2文件上载选择图像后立即显示图像？

我正在用angular2建立一个网站，并使用ng2文件上传库

---

我想在选择图像后立即在我的站点上显示它。此库如何实现这一点？

您可以侦听添加文件后的

事件，并为本地blob创建url：

this.uploader = new FileUploader({url: '/your/url' });
this.uploader.onAfterAddingFile = (fileItem) => {
    let url = (window.URL) ? window.URL.createObjectURL(fileItem._file) : (window as any).webkitURL.createObjectURL(fileItem._file);
    this.localImageUrl = url
}

现在，您必须使用的img src存储在
this.localImageUrl
中。问题是，当您尝试在DOM中使用它时，Angular会将其标记为不安全。要克服这个问题，您需要导入
domsanizer
：

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

并将其注入组件的构造函数中：

export class MyComponent {
    (...)
    constructor(public sanitizer:DomSanitizer) {
    (...)
    }

最后，在模板中添加img的地方，使用消毒剂信任url：

<img [src]="sanitizer.bypassSecurityTrustUrl(localImageUrl)">

遵循以下简单解决方案

import { DomSanitizer} from '@angular/platform-browser';
    ...
    public previewPath: any;
    ....
    constructor(private sanitizer: DomSanitizer) {
       this.uploader.onAfterAddingFile = (fileItem) => {
          this.previewPath = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
        }
    }

在html中

 <img [src]="previewPath " alt="Avatar" class="contribution-image">


在构造函数中使用
私有sanitizer:DomSanitizer
不会向页面公开sanitizer变量。应该是
公共消毒剂：DomSanitizer
它确实预览了图像，但是角度应用程序重新加载有什么解决方案吗？