小程序教学十（图片选择Dome）

使用微信小程序来实现一个图片选择器的功能，可以添加图片，可以删除图片，可以大图浏览选中的图片。

效果图

下面说一下实现思路

1.首先实现页面的布局

整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个点击事件
.wxss代码如下

<view class="addImv">
    <!--这个是已经选好的图片-->
    <block wx:for="{{imgArr}}" wx:key="key">
        <view class="upFile" bindtap="showImage" style="border-radius: 5px" data-id="{{index}}">
            <image class="itemImv" src="{{item}}"></image>
            <image class="closeImv" src="../../images/delete.png" mode="scaleToFill" catchtap="deleteImv"  data-id="{{index}}"></image>
        </view>
    </block>
    <!--这个是选择图片-->
    <view class="chooseView" bindtap="chooseImage" style="border-radius: 5px" wx:if="{{chooseViewShow}}">
        <image class="chooseImv" src="../../images/addImage.png"></image>
    </view>
</view>

.wxss文件如下

/*选择图片View*/
.addImv{
    margin: 20rpx 20rpx;
    height: 200rpx;
    background-color: #EEEEEE;
    border: 1px dashed gray;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
}
/*添加图片*/
.addImv .chooseView{
    width: 160rpx;
    height: 160rpx;
    background-color: #ffffff;
    margin-left: 10rpx;
    border: 1px solid lightgray;

    text-align: center;
    line-height: 180rpx;
}
.addImv .chooseImv{
    width: 50rpx;
    height: 50rpx;
}
/*已选择的图片*/
.addImv .upFile{
    margin-left: 10rpx;
    width: 160rpx;
    height:160rpx;
    position: relative;
}
.addImv .upFile .itemImv{
    width: 100%;
    height: 100%;
}
.addImv .upFile .closeImv{
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 50rpx;
    height:50rpx;
}

2.下面来写.js逻辑代码

(1) 首先在data中定义我们要用到的imgArr:[]图片数组，chooseViewShow:true是否显示添加图片控件。
当点击图片的时候，调用微信小程序APIwx.chooseImage获取到选中的图片数组，需要注意的是，每次选择的图片个数为：4-已选择的图片个数。
把选中的图片数组添加到所有选中的图片数组中

var imgArrNow = that.data.imgArr;
imgArrNow = imgArrNow.concat(res.tempFilePaths);

(2) 点击删除图片的时候，获取到点击图片的下标，然后从数组中移除

var imgArr = this.data.imgArr;
var itemIndex = e.currentTarget.dataset.id;
imgArr.splice(itemIndex, 1);

(3) 每一次选择完图片，或者删除完图片的时候，都看一下是否要显示添加图片控件

chooseViewShow: function () {
    if (this.data.imgArr.length >= 4) {
      this.setData({
        chooseViewShow: false
      })
    } else {
      this.setData({
        chooseViewShow: true
      })
    }
  },

(4) 点击已经选中的图片的时候，获取下标，然后调用微信小程序wx.previewImage查看大图。

---

整体js代码如下

Page({
  data: {
    imgArr: [],
    chooseViewShow: true,
  },
  onLoad: function () {
    
  },


    /** 选择图片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 4 - that.data.imgArr.length,//最多选择4张图片
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        console.log(res.tempFilePaths);
        if (res.tempFilePaths.count == 0) {
          return;
        }
        //上传图片
        //显示图片
        var imgArrNow = that.data.imgArr;
        imgArrNow = imgArrNow.concat(res.tempFilePaths);
        console.log(imgArrNow);
        that.setData({
          imgArr: imgArrNow
        })
        that.chooseViewShow();
      }
    })
  },

  /** 删除图片 */
  deleteImv: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;
    imgArr.splice(itemIndex, 1);
    console.log(imgArr);
    this.setData({
      imgArr: imgArr
    })
    //判断是否隐藏选择图片
    this.chooseViewShow();
  },

  
  /** 是否隐藏图片选择 */
  chooseViewShow: function () {
    if (this.data.imgArr.length >= 4) {
      this.setData({
        chooseViewShow: false
      })
    } else {
      this.setData({
        chooseViewShow: true
      })
    }
  },

  /** 显示图片 */
  showImage: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;

    wx.previewImage({
      current: imgArr[itemIndex], // 当前显示图片的http链接
      urls: imgArr // 需要预览的图片http链接列表
    })
  },
})