微信小程序 图片上传实例详解


Posted in Javascript onMay 05, 2017

一.了解wx.chooseImage(OBJECT)

微信小程序 图片上传实例详解

二.代码编程

在pages文件里面创建uploadimg文件夹

1.编写页面结构:uploadimg.wxml

<view class="container" style="padding:1rem;"> 
  <button type="primary"bindtap="chooseimage">获取图片</button>  
  <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx;margin:1rem 0;"/>  
</view>

微信小程序 图片上传实例详解
2.设置数据:uploadimg.js

//获取应用实例  
var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: '',  
  }, 
  /**  
   * 上传图片 
   */ 
  chooseimage: function () {  
    var _this = this;  
    wx.chooseImage({  
      count: 1, // 默认9  
      // 可以指定是原图还是压缩图,默认二者都有  
      sizeType: ['original', 'compressed'],  
      // 可以指定来源是相册还是相机,默认二者都有 
      sourceType: ['album', 'camera'],  
     // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片   
      success: function (res) {  
     
        _this.setData({  
         tempFilePaths:res.tempFilePaths  
        })  
      }  
    })  
  }  
})

微信小程序 图片上传实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解用async/await来处理异步
Aug 28 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 #Javascript
Vue中使用vux的配置详解
May 05 #Javascript
Angular directive递归实现目录树结构代码实例
May 05 #Javascript
You might like
PHP实现的封装验证码类详解
2013/06/18 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php的4种常用运行方式详解
2016/12/22 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python获取文件扩展名的方法
2015/07/06 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Python中is和==的区别详解
2018/11/15 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python虚拟环境venv用法详解
2020/05/25 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
MYSQL支持事务吗
2013/08/09 面试题
银行优秀员工事迹
2014/02/06 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
2015年手术室工作总结
2015/05/11 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
离婚协议书格式范本
2016/03/18 职场文书