小程序教学十（图片选择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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{item}}"></image>
            <image class="closeImv" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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链接列表
    })
  },
})

作者：遛遛食
链接：https://www.jianshu.com/p/9892095ac0c5