废话不多说，直接上代码！！！
在wxml文件中添加如下代码：
<view class="add_img_bg">
<view class='imagess' wx:for="{{img_url}}" data-id="{{index}}" >
<image class="moment_img" src="{{item.tempFilePath}}" bindtap="openclickImage" data-item="{{item}}"></image>
<image class="closeImv" src="../../images/chacha.png" mode="scaleToFill" catchtap="deleteImvBanner" data-index="{{index}}" data-id="{{index}}"></image>
</view>
<view class='imagess' style='display:{{hideAdd?"none":"block"}}'>
<image bindtap="chooseimage" src="/images/add_img.png" class="moment_img" ></image>
</view>
</view>
所需切图：
文章来源地址https://www.toymoban.com/news/detail-485363.html
在wxss文件中添加class样式：
.add_img_bg{
width: auto;
display: flex;
flex-wrap: wrap;
margin-top: 14px;
margin-left: 15px;
margin-right: 15px;
}
.imagess{
width:31%;
height: 100px;
padding: 2px;
position: relative;
}
.moment_img{
width: 98px;
height: 98px;
background: #F2F2F2;
border-radius: 10px;
}
.closeImv {
position: absolute;
right: 20rpx;
top: 0rpx;
width: 50rpx;
height: 50rpx;
}
在js文件中编辑功能代码：
在data里面初始化img_url:[],
选择图片：
chooseimage:function(){
var that = this;
var length = that.data.img_url.length;
var num = 5-length;
wx.chooseMedia({
count:num,
mediaType: ['image'],
sourceType: ['album', 'camera'],
camera: 'back',
success(res) {
console.log(res.tempFiles)
//把每次选择的图push进数组
var img_url = that.data.img_url;
for (var i = 0; i < res.tempFiles.length; i++) {
img_url.push(res.tempFiles[i])
}
that.setData({
img_url: img_url
})
if (img_url.length>0){
//图如果满了5张，不显示加图
if (img_url.length >= 5){
that.setData({
hideAdd:1
})
}else{
that.setData({
hideAdd: 0
})
}
}
}
})
},文章来源：https://www.toymoban.com/news/detail-485363.html
删除已选择图片：
deleteImvBanner:function(e){
var that = this;
console.log(e);
var img = that.data.img_url;
var temArray=[];
console.log("删除 = ",e.currentTarget.dataset.index);
for(var i=0;i<img.length;i++){
if(i!=e.currentTarget.dataset.index){
temArray.push(img[i]);
}
}
that.setData({
img_url:temArray,
})
if (temArray.length>0){
//图如果满了5张，不显示加图
if (temArray.length >= 5){
that.setData({
hideAdd:1
})
}else{
that.setData({
hideAdd: 0
})
}
}
},
点击查看大图：
openclickImage: function (e) {
var self = this;
console.log("查看大图 ",e);
var url = e.currentTarget.dataset.item.tempFilePath;
wx.previewImage({
current: url,
urls: [url],
fail: function () {
console.log('fail')
},
complete: function () {
console.info("点击图片了");
},
})
},
到了这里，关于微信小程序选择图片可删除，可查看大图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
