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


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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue组件的写法汇总
2018/04/12 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
python正则中最短匹配实现代码
2018/01/16 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
专升本个人自我评价
2013/12/22 职场文书
施工协议书范本
2014/04/22 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
医院消毒隔离制度
2015/08/05 职场文书
关于五一放假的通知
2015/08/18 职场文书