Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼

更新時(shí)間：2017年10月19日 14:19:11 作者：Husbin

本篇文章主要介紹了Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

本來在看vue.js沒多久，最近在趕一個(gè)項(xiàng)目用回了angular2，還是先把ng2搞定吧，畢竟還不怎么懂。這兩天我做的是用戶表單數(shù)據(jù)的提交，大部分很簡(jiǎn)單，雙向綁定就完事了，主要還是溝通的問題哈哈哈哈，雖然溝通的時(shí)候有點(diǎn)暴躁想甩鍋，不過出了門還是高高興興吃飯高高興興回去。

好了切入問題。這幾天做得最久的是仿照微信UI做的圖片上傳/顯示縮略圖/預(yù)覽/刪除功能，要求圖片1--9張。下面來記錄下如何實(shí)現(xiàn)微信的圖片預(yù)覽/刪除功能。

樣式--weui.css

樣式用的是微信官方ui，weui.min.css（生產(chǎn)環(huán)境下建議使用此壓縮版）。

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

樣例--weui.io

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

主要步驟

在正式進(jìn)入各個(gè)小功能的解說前，先上官方demo->weui.io查看圖片上傳組件的樣式以及源代碼。

官方ui顯示如下，圖片上傳的ui在Uploader中。

圖片上傳的源碼從審查元素中可獲取，如下所示：

<div class="page uploader js_show">
  <div class="page__hd">
    <h1 class="page__title">Uploader</h1>
    <p class="page__desc">上傳組件，一般配合<a class="link" href=" " rel="external nofollow" >組件Gallery</a >來使用。</p >
  </div>
  <div class="page__bd">
    <div class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
      <span class="weui-gallery__img" id="galleryImg" style="background-image:url(./images/pic_160.png)"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </div>
    </div>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">圖片上傳</p >
              <div class="weui-uploader__info">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">
                    <i class="weui-icon-warn"></i>
                  </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
                  <div class="weui-uploader__file-content">50%</div>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page__ft j_bottom">
    <a href="javascript:home()" rel="external nofollow" >< img src="./images/icon_footer_link.png"></a >
  </div>
</div>

觀察上面的代碼，外層樣式直接套用，核心功能塊如下：

圖片預(yù)覽/刪除部分：

<div class="weui-gallery" id="gallery">
 <!--顯示預(yù)覽-->
 <span class="weui-gallery__img" id="galleryImg"></span>
 <!--刪除按鈕-->
 <div class="weui-gallery__opr">
  <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="weui-gallery__del">
   <i class="weui-icon-delete weui-icon_gallery-delete"></i></a >
 </div>
</div>
圖片縮略圖列表部分：
 <ul class="weui-uploader__files" id="uploaderFiles">
  <!--每張圖片是一個(gè)<li>標(biāo)簽-->
  <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
</ul>

有了上面的準(zhǔn)備，下載就可以對(duì)功能進(jìn)行實(shí)現(xiàn)了:

1. 圖片縮略圖顯示

觀察源碼可知，每張圖片的縮略圖的代碼結(jié)構(gòu)如下：

<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>

他將圖片的url直接放到了background-img:url()屬性中，樣式直接使用微信的官方ui的class。因此，我們可以做這樣操作：創(chuàng)建一個(gè)數(shù)組存picturesUrl放圖片的url，用angular2的指令*ngFor根據(jù)數(shù)組中的內(nèi)容動(dòng)態(tài)生成縮略圖列表（注意picturesUrl中元素的格式為：url(圖片的url)）：，圖片url數(shù)組中的每個(gè)元素依次存進(jìn)中間變量img中，然后使用angular2指令[ngStyle]根據(jù)img的值生成預(yù)覽圖，主要代碼如下：

<ul class="weui-uploader__files picture-preview" id="uploaderFiles" >
                <li *ngFor="let img of picturesUrl"
                  class="weui-uploader__file"
                  [ngStyle]="{'background-image':img}">
                </li>
</ul>

<!--img實(shí)例-->
<!--'url(http://upload-images.jianshu.io/upload_images/7166236-ed8a621900728c39.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)'-->

在ts文件中定義圖片數(shù)組并且給一定的模擬數(shù)據(jù)：

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)',
 ]; //存儲(chǔ)圖片Url
 title = 'app';
 shown = false;  //是否顯示預(yù)覽，初始化為否
 selectImageUrl: string; //用于存放選中圖片的url

2. 圖片預(yù)覽顯示與消失

此處圖片預(yù)覽使用原生自帶的方法，微信的做法應(yīng)該是通過[ngStyle]來控制整個(gè)<div>樣式，而我采用了與生成縮略圖相同的方法，用[ngStyle]指令以及*ngIf指令控制預(yù)覽圖的顯示，然后在預(yù)覽圖的范圍上綁定一個(gè)點(diǎn)擊事件(click)="touchEvent()"，用于監(jiān)聽用戶的點(diǎn)擊，實(shí)現(xiàn)點(diǎn)擊退出預(yù)覽的功能。主要代碼如下：

微信的做法（根據(jù)點(diǎn)擊頁面獲取到的代碼）：

<!--預(yù)覽隱藏的樣式-->
<div class="weui-gallery" id="gallery" style="opacity: 0; display: none;">
 
</div>

<!--預(yù)覽顯示的樣式-->
<div class="weui-gallery" id="gallery" style="display: block; opacity: 1;">
 
</div>

我采用的做法：

<div class="weui-gallery" id="gallery" style="display: block"
       *ngIf="shown">
      <span class="weui-gallery__img" (click)="touchEvent()" [ngStyle]="{'background-image':selectImageUrl}"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" (click)="onDelete()" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a >
      </div>
</div>

//點(diǎn)擊縮略圖顯示預(yù)覽
 showPicture($event){
  console.log("$event.target.backgroundImage：" + $event.target.style.backgroundImage);
  this.selectImageUrl = $event.target.style.backgroundImage;
  this.shown = true;
 }

//點(diǎn)擊屏幕退出預(yù)覽
touchEvent(){
  this.shown = false;
 }

3. 圖片刪除

圖片刪除的主要代碼嵌套在圖片預(yù)覽的代碼塊中，只要為刪除部分綁定一個(gè)點(diǎn)擊事件（(click)="onDelete()"），點(diǎn)擊時(shí)出發(fā)刪除并且退出預(yù)覽即可。

onDelete(){
  if(isUndefined(this.selectImageUrl)){
   console.log("查看圖片預(yù)覽，圖片url未定義，this.selectImageUrl：" + this.selectImageUrl);
   return;
  }
 //正則去除URL中的雙引號(hào)
  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("刪除圖片出錯(cuò)，獲取URL或URL格式出錯(cuò)出錯(cuò)：" + this.selectImageUrl )
  }
 }

效果如下：

顯示縮略圖：