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

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

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于网站制作、网站建设、单县网络推广、重庆小程序开发公司、单县网络营销、单县企业策划、单县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供单县建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

好了切入问题。这几天做得最久的是仿照微信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中。

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

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

Uploader

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

图片上传

0/2
  • 50%

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

图片预览/删除部分:


图片缩略图列表部分:
 

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

1. 图片缩略图显示

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

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

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

    picturesUrl = [
      'url(/upload/otherpic72/7166236-40ed406c30ef20a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
      'url(/upload/otherpic72/7166236-d79762ed654342bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
      'url(/upload/otherpic72/7166236-64e1a458e5e29d59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
      'url(/upload/otherpic72/7166236-9a267a540acb8688.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
      'url(/upload/otherpic72/7166236-283f5687cb73eea8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)',
     ]; //存储图片Url
     title = 'app';
     shown = false;  //是否显示预览,初始化为否
     selectImageUrl: string; //用于存放选中图片的url
    

    2. 图片预览显示与消失

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

    样式,而我采用了与生成缩略图相同的方法,用[ngStyle]指令以及*ngIf指令控制预览图的显示,然后在预览图的范围上绑定一个点击事件(click)="touchEvent()",用于监听用户的点击,实现点击退出预览的功能。主要代码如下:

    微信的做法(根据点击页面获取到的代码):

    
    
    
    
    
    
    

    我采用的做法:

    //点击缩略图显示预览
     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 )
      }
     }
    

    效果如下:

    显示缩略图:

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

    显示预览:

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

    点击下面的删除栏:

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

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    分享标题:Angular2仿照微信UI实现9张图片上传和预览的示例代码
    网页链接:http://scyanting.com/article/pecpoh.html