微信小程序 图片打开相册选择图片,图片预览,图片删除效果

本文详细介绍了微信小程序中实现图片选择、预览及删除功能的方法。通过解析代码,读者可以了解如何使用wx.chooseImage和wx.previewImage进行图片交互,同时掌握图片数组管理和删除逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微信小程序 打开图片选择图片,图片预览,图片删除效果
1openPhoto:function(e){
var me = this ;
// 设置点击图片的信息 用来更改事件
if(e.currentTarget.dataset.item != me.data.photo){
var urlArr = new Array();
urlArr.push(e.currentTarget.dataset.item)
console.log(urlArr,’*’)
wx.previewImage({
urls: urlArr //需要预览的图片链接列表,
});
me.setData({
checkPhoto: e.currentTarget.dataset.item
})
}else{
wx.chooseImage({
count: 3,
success (res) {
// debugger;
if(me.data.photoNum.length == 4){
console.log(me.data.photoNum,‘添加照片的个数’)
return
}else{
const tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths)
for(var i = 0 ;i < tempFilePaths.length ;i++){
var arr = new Array();
arr = me.data.photoNum
if(arr.length > 1){
arr[arr.length -1] = tempFilePaths[i]
arr[arr.length] = ‘http://xxx.png
}else{
arr.unshift(tempFilePaths[i])
}
}
me.setData({
photoNum: arr,
})
console.log(arr,“照片数组”)
var deleteImgArr = new Array();
deleteImgArr = me.data.deleteImg
switch(me.data.photoNum.length){
case 2:
deleteImgArr = [1]
me.setData({
deleteImg: deleteImgArr
})
break;
case 3:
deleteImgArr = [1,2]
me.setData({
deleteImg: deleteImgArr
})
break;
case 4:
deleteImgArr = [1,2,3]
me.setData({
deleteImg: deleteImgArr
})
break;
}
}
}
})
}
},
// 删除图片
deleteImg: function(e){
var me = this ;
console.log(e.currentTarget.dataset.imgindex,‘删除图片的下标识’)
switch(e.currentTarget.dataset.imgindex){
case 0:
if(me.data.photoNum.length == 4){
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(2,1)
me.setData({
photoNum: deleteIMgArr,
deleteImg:[1,2]
})
}else if(me.data.photoNum.length == 3){
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(1,1)
me.setData({
photoNum: deleteIMgArr,
deleteImg:[1]
})
}else if(me.data.photoNum.length == 2){
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(0,1)
me.setData({
photoNum: deleteIMgArr,
deleteImg:[]
})
}
break;
case 1:
if(me.data.photoNum.length == 4){
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(1,1)
me.setData({
photoNum: deleteIMgArr,
deleteImg:[1,2]
})
}else if(me.data.photoNum.length == 3){
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(0,1)
me.setData({
photoNum: deleteIMgArr,
deleteImg:[1]
})
}
break;
case 2:
var deleteIMgArr = new Array();
deleteIMgArr = me.data.photoNum
deleteIMgArr.splice(0,1)
me.setData({
photoNum: deleteIMgArr,
})
if(me.data.photoNum.length == 3){
me.setData({
deleteImg:[1,2]
})
}
break;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值