博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序 - 选择图片、预览图片、删除图片
阅读量:6452 次
发布时间:2019-06-23

本文共 1327 字,大约阅读时间需要 4 分钟。

  hot3.png

小程序开发中你可能会遇到首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式。

微信小程序使用 从本地相册选择图片或使用相机拍照。

wxml 代码:

js代码:

//选择上传图片  addphoto: function () {    var that = this    // 选择图片    wx.chooseImage({      count: 1, // 默认9      sizeType: ['compressed'],//压缩图      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        var filePath = res.tempFilePaths[0];//tempFilePaths类型StringArray,图片的本地文件路径列表        that.setData({          images: that.data.images.concat(filePath)        });      }    })  },

预览图片使用 :

// 预览图集  previewImage: function (e) {    var that = this    var src = e.currentTarget.dataset.src;//获取data-src    // 预览图集    wx.previewImage({      current: src, // 当前显示图片的http链接        urls: that.data.images// 需要预览的图片http链接列表      });  },

删除图片:

//删除图片  deleteImg: function (e) {    var that = this    var index = e.currentTarget.dataset.index;    var images = that.data.images;    images.splice(index, 1); //从数组中删除index下标位置,指定数量1,返回新的数组    that.setData({      images: images,    });  },

功能实现其实很简单,需要大家好好看下小程序 API 即可,参考以上思路实现起来很简单。

 

水平有限,若有问题请留言交流!

互相学习,共同进步 :) 转载请注明出处谢谢!

转载于:https://my.oschina.net/hp2017/blog/1831519

你可能感兴趣的文章
社区已正式上线屏蔽功能,不喜欢就「加灰」吧!
查看>>
Latex beamer书签乱码解决方法
查看>>
Python按行读取大文件
查看>>
改装智能锁,或是ofo“学习”摩拜的开始!
查看>>
7月3日云栖精选夜读丨数字化诗人:这可能是第一位用算法写诗的诺贝尔文学奖得主...
查看>>
正念奇迹(一则正能量)
查看>>
【DVWA】Web漏洞实战之File Upload
查看>>
JavaNIO基础02-缓存区基础
查看>>
ab 测试模块高并发
查看>>
教你如何避免威胁建模7大“坑”
查看>>
大咖 | 斯坦福教授骆利群:为何人脑比计算机慢1000万倍,却如此高效?
查看>>
IntelliJ IDEA自动导入包去除星号(import xxx.*)
查看>>
阿里 Blink 正式开源,重要优化点解读
查看>>
日本开设无人机专业,打造无人机“人才市场”
查看>>
win10和win server 2016新的TCP功能介绍
查看>>
Eclipse安装SVN客户端
查看>>
Ubuntu 16.04下使用Wine安装Windows版的微信(不太完美)
查看>>
区块链 | 如何投资区块链资产-《区块链历史链条》4
查看>>
北京供销大数据集团荣获“2016-2017年度数据中心优秀创新企业奖”
查看>>
北航团队取得新突破,创新性的为水下机器人加上“吸盘”
查看>>