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

Angular4 实现多图片上传预览相关推荐

Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

Angular4 实现多图片上传预览

Angular4 实现多图片上传预览相关推荐

最新文章

热门文章