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


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 相关文章推荐
JS操作JSON要领详细总结
Aug 25 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
微信小程序实现登录页云层漂浮的动画效果
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实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
php use和include区别总结
2019/10/13 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
详解Python中break语句的用法
2015/05/14 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
python实现AdaBoost算法的示例
2020/10/03 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
电气专业推荐信范文
2013/11/18 职场文书
管理心得体会
2013/12/28 职场文书
保护环境建议书300字
2014/05/13 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
淘宝店策划方案
2014/06/07 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
保护环境建议书作文500字
2015/09/14 职场文书