angular - 使用 ng2-file-upload 选择图像后如何立即显示图像？

Question

我正在使用 angular2 构建一个站点并使用 ng2-file-upload 库 ng2-file-upload我想在选择后立即在我的网站上显示图像。这个库怎么可能？

Answer 1

您可以监听 onAfterAddingFile 事件并为本地 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 会将它标记为不安全。为了克服这个问题，你需要导入 DomSanitizer:

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

并将其注入(inject)到组件的构造函数中:

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

最后，在模板中添加 img 的地方，使用 sanitizer 信任 url:

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