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


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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python关于倒排列的知识点总结
2020/10/13 Python
师范大学毕业自我鉴定
2013/11/21 职场文书
质检员岗位职责
2013/12/17 职场文书
往来会计岗位职责
2013/12/19 职场文书
xxx同志考察材料
2014/02/07 职场文书
党员违纪检讨书
2014/02/18 职场文书
房屋出售协议书
2014/04/10 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014年应急工作总结
2014/12/11 职场文书
收银员岗位职责
2015/02/03 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS