微信小程序 获取相册照片实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 获取相册照片

今天遇到微信小程序的用户头像设置功能,做笔记.

先上gif:

微信小程序 获取相册照片实例详解

再上代码:

小demo,代码很简单.

1.index.wxml

<!--index.wxml--> 
<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> 
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

2.index.js

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

API 说明:

微信小程序 获取相册照片实例详解

这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个API.

示例代码:

wx.chooseImage({ 
 success: function(res) { 
  var tempFilePaths = res.tempFilePaths 
  wx.uploadFile({ 
   url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 
   filePath: tempFilePaths[0], 
   name: 'file', 
   formData:{ 
    'user': 'test' 
   }, 
   success: function(res){ 
    var data = res.data 
    //do something 
   } 
  }) 
 } 
})

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

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 #Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 #Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 #Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 #Javascript
微信小程序 地图(map)实例详解
Nov 16 #Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 #Javascript
You might like
比较详细PHP生成静态页面教程
2012/01/10 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
动态控制Table的js代码
2007/03/07 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
2014年小学植树节活动方案
2014/03/02 职场文书
财务总监管理职责范文
2014/03/09 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
大学毕业生推荐信
2014/07/09 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年体育工作总结
2014/11/24 职场文书
2014年实习生工作总结
2014/11/27 职场文书
成绩单评语
2015/01/04 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL