微客导航 » 文章资讯 » 微信小程序实现图片上传、删除和预览功能的方法

微信小程序实现图片上传、删除和预览功能的方法

2023-09-19 07:30:04 452

本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法。分享给大家供大家参考，具体如下：

这里主要介绍一下微信小程序的图片上传图片删除和图片预览

布局

JS处理

data:{
imgs:[]
},
//上传图片
chooseImg:function(e){
varthat=this;
varimgs=this.data.imgs;
if(imgs.length>=9){
this.setData({
lenMore:1
});
setTimeout(function(){
that.setData({
lenMore:0
});
},2500);
returnfalse;
}
wx.chooseImage({
//count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
vartempFilePaths=res.tempFilePaths;
varimgs=that.data.imgs;
//console.log(tempFilePaths+'----');
for(vari=0;i=9){
that.setData({
imgs:imgs
});
returnfalse;
}else{
imgs.push(tempFilePaths[i]);
}
}
//console.log(imgs);
that.setData({
imgs:imgs
});
}
});
},
//删除图片
deleteImg:function(e){
varimgs=this.data.imgs;
varindex=e.currentTarget.dataset.index;
imgs.splice(index,1);
this.setData({
imgs:imgs
});
},
//预览图片
previewImg:function(e){
//获取当前图片的下标
varindex=e.currentTarget.dataset.index;
//所有图片
varimgs=this.data.imgs;
wx.previewImage({
//当前显示图片
current:imgs[index],
//所有图片
urls:imgs
})
}

希望本文所述对大家微信小程序开发有所帮助。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现图片上传、删除和预览功能的方法

热门推荐

随机推荐