Angular4 实现多图片上传预览

之前写了一个angular1x的实现，但手痒痒于是就搞了一下angular4的实现方式，不BB直接上代码了。样式里用到了fontawesome的图标

首先我们直接看如何调用
别忘了我们还要在父元素的component.ts上创建previewImgFile这个变量，否则就会报错，这里之所以和父组件通信，就是要把我们上传的file对象传给服务器，所以需要监听子组件的上传图片

<app-previewimg  [(previewImgFile)]="previewImgFile"></app-previewimg>

我们再来看下这个组件的component和service
component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';import {PreviewimgService} from "./previewimg.service";@Component({  selector: 'app-previewimg',  templateUrl: './previewimg.component.html',  styleUrls: ['./previewimg.component.css']})export class PreviewimgComponent implements OnInit {  @Input()  previewImgFile  @Output()  previewImgFileChange: EventEmitter<string> = new EventEmitter();  previewImgSrcs = [];  constructor(public previewimgService: PreviewimgService) { }  ngOnInit() {  }  previewPic(event) {    if(!event.target.files[0]) {      return;    }    let that = this;    this.previewimgService.readAsDataUrl(event.target.files[0]).then(function(result) {      that.previewImgSrcs.push(result)      let file = event.target.files[0];      that.previewImgFile.push(file)      that.previewImgFileChange.emit(that.previewImgFile);    })  }  remove(i) {    this.previewImgSrcs.splice(i,1);    this.previewImgFile.splice(i,1);  }}

import { Injectable } from '@angular/core';@Injectable()export class PreviewimgService {  constructor() { }  getReader(resolve, reject) {    let reader = new FileReader();    reader.onload = this.Onload(reader, resolve);    reader.onerror = this.OnError(reader, reject);    return reader;  }  readAsDataUrl(file){    let that = this;    return new Promise(function(resolve,reject){      let reader = that.getReader(resolve, reject);      reader.readAsDataURL(file);    })  }  Onload(reader: FileReader, resolve) {    return () => {      resolve(reader.result);    }  }  OnError(reader: FileReader, reject) {    return () => {      reject(reader.result);    }  }}

component.css

.preview-label {  width: 100px;  height:100px;  border:1px dotted #ccc;  position: relative;  vertical-align: top;  display: inline-block}.preview-label>input {  display: none;}.preview-label .uploadimgicon {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);}.preview-label .uploadimgremove {  position: absolute;  top:5px;  right:5px;}

component.html

<label class="preview-label" *ngFor="let img of previewImgSrcs let i = index">  <img src="{{img}}" width="100px" height="100px">  <i class="fa fa-remove uploadimgremove" (click)="remove(i)"></i></label><label class="preview-label"><input type="file" (change)="previewPic($event)"><i class="fa fa-2x fa-plus uploadimgicon"></i></label>

好啦，如果有bug可以及时反馈下，如果以后需要什么属性在继续封装，如果大家还有别的简单的封装，希望一起讨论下，博主小白，有错还希望见谅啊~~~