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


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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
再谈JavaScript线程
Jul 10 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
面试常见的js算法题
Mar 23 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Atom的python插件和常用插件说明
2018/07/08 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
迷你西餐厅创业计划书范文
2013/12/31 职场文书
卫生安全检查制度
2014/02/04 职场文书
2014庆六一活动方案
2014/03/02 职场文书
党支部换届选举方案
2014/05/08 职场文书
图书馆标语
2014/06/19 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
离婚协议书范本2014
2014/10/27 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
详解Laravel服务容器的优势
2021/05/29 PHP
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS