微信小程序 选择图片及放大预览

小程序点击图片放大实现方式：使用微信小程序图片预览接口。

今天用到了上传图片的功能，在真机上测试时发现有的图片实际没有显示，有个小小的坑，分享出来，希望大家可以避免。共勉！

wxml:

<button bindtap="addPic">添加图片</button>
  <view class="imgBox" wx:for="{{imgBox}}" wx:key="index">
    <image src="{{item}}"  data-src="{{item}}" mode="aspectFill" bindtap="previewImage"></image>
  </view>

wxss:

.imgBox{width:300rpx;height:300rpx; float: left; margin:0 20rpx;}
.imgBox image { width:100%;height:100%;}

js:

Page({
  data: {
    imgBox:[],
  },
  addPic:function(){
    var _this=this;
    var imgBox=[];
    wx.chooseImage({
      count: 4, // 默认9
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        for (var i = 0; i < tempFilePaths.length;i++){
          imgBox.push(tempFilePaths[i]);
        }
        _this.setData({
          imgBox: _this.data.imgBox.concat(imgBox)
        })
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.dataset.src, // 当前显示图片的http链接
      urls: this.data.imgBox // 需要预览的图片http链接列表
    })
  },
})

手动设置图片就不赘述了，就是设置imgBox，这里只用真机测试，取实际的图片。

在这里要注意，res.tempFilePaths实际返回的是一个数组，在选择多张图片时，数组的长度就是实际选择的照片张数，必须要进行循环，拿到全部的数据，页面图片才能正常全部显示。