Angular2仿照微信UI实现9张图片上传和预览的示例代码

Angular2仿照微信UI实现9张图片上传和预览的示例代码

本来在看vue.js没多久，最近在赶一个项目用回了angular2，还是先把ng2搞定吧，毕竟还不怎么懂。这两天我做的是用户表单数据的提交，大部分很简单，双向绑定就完事了，主要还是沟通的问题哈哈哈哈，虽然沟通的时候有点暴躁想甩锅，不过出了门还是高高兴兴吃饭高高兴兴回去。

好了切入问题。这几天做得最久的是仿照微信UI做的图片上传/显示缩略图/预览/删除功能，要求图片1--9张。下面来记录下如何实现微信的图片预览/删除功能。

样式--weui.css

样式用的是微信官方ui，weui.min.css（生产环境下建议使用此压缩版）。

下载地址weui.css/weui.min.css。

样例--weui.io

微信官方自带了demo: weui.io。

主要步骤

在正式进入各个小功能的解说前，先上官方demo->weui.io查看图片上传组件的样式以及源代码。

官方ui显示如下，图片上传的ui在Uploader中。

图片上传的源码从审查元素中可获取，如下所示：

上传组件，一般配合组件Gallery来使用。

图片上传

< img src="./images/icon_footer_link.png">

观察上面的代码，外层样式直接套用，核心功能块如下：

图片预览/删除部分：

图片缩略图列表部分：

有了上面的准备，下载就可以对功能进行实现了:

1. 图片缩略图显示

观察源码可知，每张图片的缩略图的代码结构如下：

他将图片的url直接放到了background-img:url()属性中，样式直接使用微信的官方ui的class。因此，我们可以做这样操作：创建一个数组存picturesUrl放图片的url，用angular2的指令*ngFor根据数组中的内容动态生成缩略图列表（注意picturesUrl中元素的格式为：url(图片的url)）：，图片url数组中的每个元素依次存进中间变量img中，然后使用angular2指令[ngStyle]根据img的值生成预览图，主要代码如下：

class="weui-uploader__file"

[ngStyle]="{'background-image':img}">

在ts文件中定义图片数组并且给一定的模拟数据：

picturesUrl = [

'url(http://upload-images.jianshu.io/upload_images/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',

'url(http://upload-images.jianshu.io/upload_images/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',

'url(http://upload-images.jianshu.io/upload_images/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',

'url(http://upload-images.jianshu.io/upload_images/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',

'url(http://upload-images.jianshu.io/upload_images/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',

]; //存储图片Url

title = 'app';

shown = false; //是否显示预览，初始化为否

selectImageUrl: string; //用于存放选中图片的url

2. 图片预览显示与消失

此处图片预览使用原生自带的方法，微信的做法应该是通过[ngStyle]来控制整个

微信的做法（根据点击页面获取到的代码）：

我采用的做法：

*ngIf="shown">

//点击缩略图显示预览

showPicture($event){

console.log("$event.target.backgroundImage：" + $event.target.style.backgroundImage);

this.selectImageUrl = $event.target.style.backgroundImage;

this.shown = true;

}

//点击屏幕退出预览

touchEvent(){

this.shown = false;

}

3. 图片删除

图片删除的主要代码嵌套在图片预览的代码块中，只要为删除部分绑定一个点击事件（(click)="onDelete()"），点击时出发删除并且退出预览即可。

onDelete(){

if(isUndefined(this.selectImageUrl)){

console.log("查看图片预览，图片url未定义，this.selectImageUrl：" + this.selectImageUrl);

return;

}

//正则去除URL中的双引号

this.selectImageUrl = this.selectImageUrl.replace(/"/g,"");

console.log("(this.picturesUrl.indexOf(this.selectImageUrl):"+this.picturesUrl.indexOf(this.selectImageUrl));

//判断图片URL是否存在

if(this.picturesUrl.indexOf(this.selectImageUrl)!== -1){

this.picturesUrl.splice(this.picturesUrl.indexOf(this.selectImageUrl) , 1);

setTimeout(()=>{

this.shown = false;

},

20);

}else{

console.log("删除图片出错，获取URL或URL格式出错出错：" + this.selectImageUrl )

}

}

效果如下：

显示缩略图：

显示预览：

点击下面的删除栏：

好了，有时间再附上源码和在线demo。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。