微信小程序---选择图片和调用微信拍照
1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
avatarUrl:null
},
//事件处理函数
bindViewTap: function() { var that = this
// 选择图片和拍照
wx.chooseImage({
count: , // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
console.log("---"+tempFilePaths)
that.setData({avatarUrl:tempFilePaths[]})
},
fail: function (res) {
console.log("fail...")
},
complete: function(res) {
console.log("完成...")
}
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
2.文件的上传和下载:
wx.uploadFile(OBJECT)
将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data 。
- tip: 最大并发限制是 10 个
- tip: 默认超时时间和最大超时时间都是 60s
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})
}
})
3.文件的下载:
wx.downloadFile(OBJECT)
下载文件资源到本地。客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。
wx.downloadFile({
url: 'http://example.com/audio/123', //仅为示例,并非真实的资源
success: function(res) {
wx.playVoice({
filePath: res.tempFilePath
})
}
})
- tip: 最大并发限制是 10 个
- tip: 默认超时时间和最大超时时间都是 60s
- tip: 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
- tip: 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效
微信小程序---选择图片和调用微信拍照的更多相关文章
- 微信小程序选择图片,查看图片信息,浏览图片,图片上传
依次点击链接请查看以下步骤 选择图片: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageob ...
- 微信小程序 --- 选择图片和拍照
wx.chooseImage 选择图片 / 进行拍照 //获取应用实例 const app = getApp() Page({ data: { onOff:true }, btnclick:funct ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序裁剪图片成圆形
代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...
- 微信小程序天坑--图片汉字命名
图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.
- 微信小程序开发系列六:微信框架API的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
随机推荐
- jq事件操作汇总
bind() 向匹配元素附加一个或更多事件处理器blur( ) 触发.或将函数绑定到指定元素的 blur 事件change() 触发.或将函数绑定到指定元素的 ...
- Eclipse设置模板codetemplates
在Window->Preferences->Java->Code Style->Code Templates,点击"Import",导入模板codetemp ...
- 并查集+启发式合并+LCA思想 || 冷战 || BZOJ 4668
题面:bzoj炸了,以后再补发 题解: 并查集,然后对于每个点记录它与父亲节点联通的时刻 tim ,答案显然是 u 到 v 的路径上最大的 tim 值.启发式合并,把 size 小的子树往大的上并,可 ...
- CI/CD----jenkins+gitlab+django(内网)
1.py第三方包获取 ./pip3 ./pip3 -i "http://pypi.douban.com/simple/" --trusted-host pypi.douban.co ...
- ie浏览器css兼容样式实例
background-color:#f00;/*all*/background-color:#0ff\0;/* ie 8/9 */background-color:#0f0\9\0;/* ie9 */ ...
- django前戏
Django前戏: 1.软件开发: C/S 客户端与服务端 HTTP(超文本传输协议):协议的由来,如同sql语句由来一样.为了开发使用方便所形成的统一接口统一规范 学习Django之前我们先来了解下 ...
- PowerDesigner 生成SQL Server 2005 注释脚本
--生成数据表的注释EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=[%R%?[N]]%.q:COMMENT% , @l ...
- qt5---资源文件
创建资源文件: 视频教程:https://www.bilibili.com/video/av66748323/ 右击工程目录--->-->--> 添加资源: 右击资源文件--> ...
- 自动化登录QQ脚本
1.准备第三方包: py -3.6 -m pip install win32gui py -3.6 -m pip install Pywin32 py -3.6 -m pip install pyHo ...
- gulp[13124]: c:\ws\src\node_contextify.cc:626: Assertion `args[1]->IsString()' failed
在执行gulp sass时报下面错误,又或者执行ionic serve时报这个错,选择低一点版本的node,建议8v; gulp[13124]: c:\ws\src\node_contextify.c ...