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


Posted in Javascript onDecember 18, 2017

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

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

布局

<view class="img-v">
 <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
  <image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
  <view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
 </view>
 <view class="upload-img-btn" bindtap="chooseImg"></view>
</view>

JS处理

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

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

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 #Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 #Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 #Javascript
分析JavaScript数组操作难点
Dec 18 #Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 #Javascript
JavaScript模块详解
Dec 18 #Javascript
webpack打包js文件及部署的实现方法
Dec 18 #Javascript
You might like
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
财务管理专业推荐信
2013/11/19 职场文书
销售找工作求职信
2013/12/20 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
高三霸气励志标语
2014/06/24 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Docker部署Mysql8的实现步骤
2022/07/07 Servers