微信小程序实现图片上传放大预览删除代码

本文实例为大家分享了微信小程序图片上传放大预览的具体代码，供大家参考，具体内容如下

效果：

image.js代码：

页面({ //选择相册或拍照data: { imgs: [] }，//上传图片选择Img:函数{ var=thisvar imgs=这个。数据。imgsif(imgs。长度=9){这个。setdata({ len more : 1 })；setTimeout(函数(){那个。setdata({ lenmore : 0 })；}, 2500);返回false } wx . choose image({//count : 1，//默认9尺寸类型： ['原始','压缩'],//可以指定是原图还是压缩图，默认二者都有sourceType: ['相册','相机'],//可以指定来源是相册还是相机，默认二者都有成功：函数(res) { //返回选定照片的本地文件路径列表，tempFilePath可以作为图片标签的科学研究委员会属性显示图片var tempfile path=RES . tempfile path；var imgs=那个。数据。imgs//控制台。日志(tempfile path '-')；for(var I=0；I tempfilepath . lengthi){ if(imgs。长度=9){那个。setdata({ imgs : imgs })；返回false} else { imgs。push(tempfile path[I])；} }//控制台。日志；那个。setdata({ imgs : imgs })；} });}, //删除图片deleteImg:函数{ var=thisvar imgs=那个。数据。imgsvar索引=e . CurrentTarget。数据集。指数；//获取当前长按图片下标wx.showModal({ title: '提示，content: '确定要删除此图片吗？成功：函数如果确认控制台。日志('点击确定了');imgs.splice(索引，1);} else if(RES . cancel){ console。日志('点击取消了');返回假的}那个。setdata({ imgs : imgs })；} }) }, //预览图片previewImg:函数(e) { //获取当前图片的下标var索引=e . CurrentTarget。数据集。指数；//所有图片var imgs=这个。数据。imgswx.previewImage({ //当前显示图片current: imgs[index]，//所有图片urls: imgs }) }})image.wxml代码：

button class=' upload-img-BTN ' bind tap=' choice img '上传/button view class=' img ' wx : for=' { { img } } ' wx : for-item=' item ' wx : key=' * this ' image src=' http : { { item } } ' data-index=' { { index } } ' mode=' width fix ' bind tap=' previewImg ' bindlonpress=' deleteImg '/image/view保存到服务器上的代码未完待续。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。