在调用小程序开发时，调用小程序接口选择图片后发现没有图片预览和删除，很不人性化，HTM资源站长亲自写个微信小程序实现图片选择后的预览和删除某张照片的方法，把源码分享给大家。
看下实现效果图：
wxml模板源码：
<view class="addImv">
<!--这个是已经选好的图片-->
<view wx:for="{{banner}}" wx:key="key" class="upFile" bindtap="showImageBanner" style="border-radius: 5px" data-id="{{index}}">
<image class="itemImv" src="{{item}}"></image>
<image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}"></image>
</view>
<!--这个是选择图片-->
<view class="chooseView" bindtap="chooseBanner" style="border-radius: 5px" wx:if="{{chooseViewShowBanner}}">
<image class="chooseImv" src="../../resources/images/add.png"></image>
</view>
</view>
样式源码：
/*选择图片View*/
.addImv { background-color: white; /* border: 1px dashed gray; */
display: flex; flex-wrap: wrap; align-items: center; margin-top: 5rpx;
}
.upImv { background-color: white; width: 100%; margin-top: 5rpx;
}
.upImv_text { font-size: 30rpx; margin-left: 20rpx; padding-top: 20rpx;
}
/*添加图片*/
.addImv .chooseView {
width: 180rpx; height: 180rpx;
margin: 20rpx 20rpx; background-color: #f2f6f9;
border: 1px dashed lightgray; text-align: center;
line-height: 180rpx; /* padding: 0rpx 7rpx; */
border-radius: 5px; margin-left: 40rpx;
}
.addImv .chooseImv { width: 50rpx; height: 50rpx;
}
/*已选择的图片*/
.addImv .upFile { width: 180rpx; height: 180rpx;
position: relative; padding: 0rpx 7rpx;
margin-left: 40rpx; border: 1px solid #c0ccda;
}
.addImv .upFile .itemImv { width: 180rpx; height: 180rpx; padding: 0rpx 7rpx;
}
.addImv .upFile .closeImv { position: absolute; right: 0rpx; top: 0rpx; width: 50rpx; height: 50rpx;
}
js源码：
Page({
/**
* 页面的初始数据
*/
data: { banner: [], //轮播图片
},
/** 选择图片Banner */
chooseBanner: function() { var that = this; if (this.data.banner.length < 2) {
wx.chooseImage({ count: 2, //最多选择2张图片- that.data.banner.length,
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.banner;
imgArrNow = imgArrNow.concat(res.tempFilePaths);
that.setData({ banner: imgArrNow
})
that.chooseViewShowBanner();
}
})
} else {
wx.showToast({ title: '限制选择6个文件', icon: 'loading', duration: 1000
})
}
},
/** 删除图片Banner */
deleteImvBanner: function(e) { var banner = this.data.banner; var itemIndex = e.currentTarget.dataset.id;
banner.splice(itemIndex, 1); this.setData({ banner: banner
}) //判断是否隐藏选择图片
this.chooseViewShowBanner();
},
/** 是否隐藏图片选择Banner*/
chooseViewShowBanner: function() { if (this.data.banner.length >= 2) { this.setData({ chooseViewShowBanner: false
})
} else { this.setData({ chooseViewShowBanner: true
})
}
},
/** 查看大图Banner */
showImageBanner: function(e) { var banner = this.data.banner; var itemIndex = e.currentTarget.dataset.id; console.log("itemIndex:" + JSON.stringify(e))
wx.previewImage({ current: banner[itemIndex], // 当前显示图片的http链接
urls: banner // 需要预览的图片http链接列表
})
},
})
