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


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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
微信小程序实现日历效果
Dec 28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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
Protoss兵种介绍
2020/03/14 星际争霸
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
js控制框架刷新
2008/08/01 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
几个数据库方面的面试题
2016/07/01 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
员工培训邀请函
2014/01/11 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
心理健康教育制度
2014/01/27 职场文书
商业房地产广告语
2014/03/13 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
delete in子查询不走索引问题分析
2022/07/07 MySQL