微信小程序---选择图片和调用微信拍照
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的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
随机推荐
- zencart模板列表下载地址
下载index.html文件后用浏览器打开,里面有一百多个zencart模板示例 下载地址:zencart模板示例下载地址 或者复制下面网址,用浏览器打开即可下载: http://bcs.duapp. ...
- BZOJ2306 [Ctsc2011]幸福路径[倍增]
这个有环的情况非常的讨厌,一开始想通过数学推等比数列的和,但是发现比较繁就不做了. 然后挖掘这题性质. 数据比较小,但是体力可以很接近1(恼怒),也就是说可能可以跳很多很多步.算了一下,大概跳了2e7 ...
- nginx防止跳转到内网解决
proxy_redirect http://test.abc.com:9080/ /;
- 原根&离散对数简单总结
原根&离散对数 1.原根 1.定义: 定义\(Ord_m(a)\)为使得\(a^d\equiv1\;(mod\;m)\)成立的最小的d(其中a和m互质) 由欧拉定理可知: \(Ord\le\P ...
- 【weblogic】WTC配置(Weblogic Tuxedo Connector)
记录下工作中涉及到的WTC使用 WTC 是BEA 的WEB支持产品Weblogic和中间件产品Tuxedo之间的连接工具,全称Weblogic Tuxedo Connector.WTC使Weblogi ...
- 通俗易懂的例子解释 IAAS、SAAS、PAAS 的区别
你一定听说过云计算中的三个“高大上”的你一定听说过云计算中的三个“高大上”的概念:IaaS.PaaS和SaaS,这几个术语并不好理解.不过,如果你是个吃货,还喜欢披萨,这个问题就好解决了!好吧,其实你 ...
- C# 跨线程访问控件(MethodInvoker)
参考:https://www.cnblogs.com/lvdongjie/p/5428815.html .Net 通常禁止跨线程访问控件,设置Control.CheckForIllegalCrossT ...
- 7、菜单栏、工具栏、状态栏、浮动窗口、TextEdit
新建项目,基类选择QMainWindow,不勾选ui mainwindow.cpp代码: #include "mainwindow.h" #include <QMenu ...
- jquery dblclick()方法 语法
jquery dblclick()方法 语法 作用:当双击元素时,会发生 dblclick 事件.当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.在很短的时间内发生两次 ...
- poj 2187 Beauty Contest 凸包模板+求最远点对
题目链接 题意:给你n个点的坐标,n<=50000,求最远点对 #include <iostream> #include <cstdio> #include <cs ...