Angular 文件上传

下面做的是Angular  实现文件上传的一个小功能。

首先在你所需要用到的ts中导入:

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

在constructor()中依赖注入private sanitizer: DomSanitizer:

 constructor( private sanitizer: DomSanitizer) {

  }

HTML:

<div class="formCenter" style="width: 650px; height: 350px">
    <img [src]="imgUrl" alt="图片" style="width: 600px; height: 300px" title="图片" class="form-control">
    <input type="file" accept="image/.jpg, image/.png" (change)="fileChange($event)" class="fileInput">
  </div>

ts:

imgUrl;
// 声明<img [src]="{{imgUrl}}"/>

  fileChange(i) {
    const file  = i.target.files[0];
    const imgUrl = window.URL.createObjectURL(file);
    const sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
    this.imgUrl = sanitizerUrl;
    console.log(this.imgUrl);
  }

结果是这个样子:

期待更好的方法。