今天就是想弄一个,在本地可以预览选择的图片,然后做相应的操作,如上传等。
- <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’;
效果如下图所示: