使用微信小程序来实现一个图片选择器的功能，可以添加图片，可以删除图片，可以大图浏览选中的图片。
效果图
下面说一下实现思路
1.首先实现页面的布局
整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个点击事件
.wxml代码如下
<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链接列表
})
},
})
持续更新中...
