手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >微信小程序 获取相册照片实例详解
微信小程序 获取相册照片实例详解
摘要:微信小程序获取相册照片今天遇到微信小程序的用户头像设置功能,做笔记.先上gif:再上代码:小demo,代码很简单.1.index.wxml获...

微信小程序 获取相册照片

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

先上gif:

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

再上代码:

小demo,代码很简单.

1.index.wxml

<> <button bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"/>

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 说明:

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

这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个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中基本选择器用法实例详解

javascript动态创建表格及添加数据实例详解

js兼容火狐获取图片宽和高的方法

js事件监听器用法实例详解

JavaScript中的this,call,apply使用及区别详解

AngularJS的内置过滤器详解

微信浏览器内置JavaScript对象WeixinJSBridge使用实例

jQuery结合ajax实现动态加载文本内容

JavaScript正则表达式的分组匹配详解

精品推荐
分类导航