Angular6 input file 上传图片显示缩略图

https://stackblitz.com/edit/angular-upload-image-display-thumbnails?file=src/main.ts

<h1>上传图片显示缩略图</h1>
<img height="100px" width="100px" [src]="_d.bypassSecurityTrustUrl(imgsrc)">
<input type="file" (change)="fileChange($event)">
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  imgsrc = 'https://c.staticblitz.com/assets/client/components/SideMenu/blitz_logo-11cebad97cad4b50bc955cf72f532d1b.png';

  constructor(
    public _d: DomSanitizer // 图片路径转换使用,使用见HMTL文件
  ) { }

  fileChange(e) {
    const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片
    this.imgsrc = window.URL.createObjectURL(file); // 获取上传的图片临时路径
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容