微信小程序----图片预览

<view>
  <button bindtap="previewImage" type="primary">图片上传预览</button>
  <view class="tui-content"> 
    <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image>
  </view>
</view>

page{background-color: #efeff4;}
.tui-preview-img{
  width: 200rpx;
  height: 120rpx;
}

Page({
  data: {
    previewImageArr:[]
  },
  previewImage(e){
    var self = this;
    wx.chooseImage({
      count:8,
      success(res) {
        var tempFilePaths = res.tempFilePaths;
        self.setData({ previewImageArr: tempFilePaths});
      }
    })
  },
  changePreview(e){
    var self = this;
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: self.data.previewImageArr
    })
  }
})