预览本地图片--Angular4

今天就是想弄一个，在本地可以预览选择的图片，然后做相应的操作，如上传等。

• 选择图片的方法：

<input type="file" (change)="onChangeSelectFile($event)">

• 显示图片

    <div class="header" *ngIf="HeadPortrait">      <img [src]="imageUrl">    </div>

• js怎么处理呢，很简单

imageUrl:any;onChangeSelectFile(event){const file = event.currentTarget.files[0];    this.UserInfo[field] = file;    // 必须 bypassSecurityTrustUrl 转换一下 url ，要不能angular会报，说url不安全错误。    this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file)); }

注意：sanitizer 这个得要在构造函数里依赖注入一下。 constructor(private sanitizer: DomSanitizer) {}；

• 当然得导入一下DomSanitizer import { DomSanitizer } from ‘@angular/platform-browser’;

效果如下图所示：