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


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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
Angular的$http与$location
Dec 26 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
vue路由--网站导航功能详解
Mar 29 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python speech模块的使用方法
2020/09/09 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
教师节宣传方案
2014/05/23 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
管理失职检讨书
2015/05/05 职场文书
铁人观后感
2015/06/16 职场文书
婚宴新郎致辞
2015/07/28 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
利用Python多线程实现图片下载器
2022/03/25 Python