微信小程序（15）--上傳圖片公用組件(2)

接下來開始寫寫上傳圖片的公用組件，可以自定義上傳幾張圖片。

chooseImage文件夾里面的index.wxml和index.js,涉及圖片上傳，刪除，預覽。

<view class="img-v clearfix">
 <view class="img-chooseImage" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg" class="list-img"></image>
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"><image  src="../../../image/close.png"></image></view>
 </view>
 <view class="upload-img-btn" bindtap="chooseImg" hidden='{{ishide}}'><image class="add-img" src="../../../image/add-img.jpg"></image></view>
</view>

Component({ 
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  properties: {
    count: String   //父子傳參
  },
  /**
   * 頁面的初始數據
   */
  data: {
    imgs: [],
    count:1,
    ishide:false
  },
  // 上傳圖片
  methods: { 
    chooseImg: function (e) {
      var that = this;
      var imgs = this.data.imgs;
      if (imgs.length >= 9) {
        this.setData({
          lenMore: 1
        });
        setTimeout(function () {
          that.setData({
            lenMore: 0
          });
        }, 2500);
        return false;
      }
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function (res) {
          // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
          var tempFilePaths = res.tempFilePaths;
          var imgs = that.data.imgs;
          // console.log(tempFilePaths + '----');
          console.log(that.data.count);
          for (var i = 0; i < tempFilePaths.length; i++) {
            if (imgs.length > that.data.count-1) {
              that.setData({
                imgs: imgs
              });
              return false;
            } else {
              imgs.push(tempFilePaths[i]);
              if (imgs.length > that.data.count-1){
                that.setData({
                  ishide: true
                });
              }
            }
          }
          // console.log(imgs);
          that.setData({
            imgs: imgs
          });
          that.triggerEvent("chooseImg");//觸發回調
        }
      });
    },
    // 刪除圖片
    deleteImg: function  (e) {
      var imgs = this.data.imgs;
      var index = e.currentTarget.dataset.index;
      imgs.splice(index, 1);
      this.setData({
        imgs: imgs
      });
      if (imgs.length < this.data.count) {
        // console.log(imgs.length);
        this.setData({
          ishide: false
        });
      }
      this.triggerEvent("deleteImg");//觸發回調
    },
    // 預覽圖片
    previewImg: function  (e) {
      //獲取當前圖片的下標
      var index = e.currentTarget.dataset.index;
      //所有圖片
      var imgs = this.data.imgs;
      wx.previewImage({
        //當前顯示圖片
        current: imgs[index],
        //所有圖片
        urls: imgs
      })
    }
  }
})

index文件夾的index.json和index.wxml和index.js

{
  "navigationBarTitleText": "圖片上傳",
  "usingComponents": {
    "pop": "../common/chooseImage/index",
    "popnum": "../common/chooseImage/index"    
  }
}

 <view class="perfect-title">圖片上傳公用組件</view>  
  <view class="pop-box">
    <view class="upload-title">營業執照原件(1張)</view>
      <view style="margin:30rpx;">
        <pop id="pop" bind:chooseImg="chooseImg" bind:deleteImg="deleteImg" bind:previewImg="previewImg" count="{{count}}"></pop>
      </view>
  </view>  
  <view class="pop-box">
    <view class="upload-title">身份證原件正反面(2張)</view>
      <view style="margin:30rpx;">
        <popnum id="popnum" bind:chooseImg="chooseImgnum" bind:deleteImg="deleteImgnum" bind:previewImg="previewImg" count="{{countnum}}"></popnum>
      </view>
  </view> 
  <view class="btn-area" id="buttonContainer2">
    <button type="primary" bindtap="submitBtn">確認</button>
  </view> 

Page({

  /**
   * 頁面的初始數據
   */
  data: {
   imgs:[],
   imgsnum: [],
   count:1,
   countnum:2
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    //獲得pop組件
    this.pop = this.selectComponent("#pop");
    this.popnum = this.selectComponent("#popnum");
  },
  chooseImg: function (e) {
    // console.log(this.pop.data.imgs);
    this.setData({
      imgs: this.pop.data.imgs
    })
  },
  deleteImg: function (e) {
    // console.log(this.pop.data.imgs);
    this.setData({
      imgs: this.pop.data.imgs
    })
  },
  chooseImgnum: function (e) {
    // console.log(this.pop.data.imgs);
    this.setData({
      imgsnum: this.popnum.data.imgs
    })
  },
  deleteImgnum: function (e) {
    // console.log(this.pop.data.imgs);
    this.setData({
      imgsnum: this.popnum.data.imgs
    })
  },
  submitBtn: function(){
    console.log(this.data.imgs);
    console.log(this.data.imgsnum);
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  }
})