微信小程序---选择图片和调用微信拍照
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的调用
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
随机推荐
- 关于Vue-$router传参出现刷新页面或者返回页面丢失数据的问题
也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式params或者query 1.query this.$rou ...
- primer看完了
放假这将近十天吧,终于把C++ Primer中文版第五版大致看完了,然而第四部分(高级主题)还是没有看,感觉那是需要有足够的项目经验再看. 另外,看一遍肯定不够,忘得也会很快,我十分确认今后还会很多次 ...
- java8学习之groupingByConcurrent与partioningBy源码分析
在上一次[http://www.cnblogs.com/webor2006/p/8387656.html]中对于Collectors.groupingBy()方法进行了完整的分析之后,接着继续来分析一 ...
- PHP的函数获取图片的宽高等信息
PHP的函数getimagesize可以得到图片的宽高等信息 array getimagesize ( string $filename [, array &$imageinfo ] ) ...
- 创建CUDA项目
输出选择X64 .cu文件属性: 常规-项类型:CUDA C/C++ 项目属性: 平台:活动(x64) CUDA C/C++ - Common-Target Machine Platform: 64- ...
- HTML5日期时间输入类型注意事项(time,date)
原文链接:http://www.webhek.com/post/html5-date.html 1.HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式.所以,各浏览 ...
- 关于Mongodb的Cap理论的思考(转载)
大约在五六年前,第一次接触到了当时已经是hot topic的NoSql.不过那个时候学的用的都是mysql,Nosql对于我而言还是新事物,并没有真正使用,只是不明觉厉.但是印象深刻的是这么一张图片( ...
- codevs 2597 团伙x
题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的 ...
- HDU2433—Travel (BFS,最短路)
Travel Time Limit: 10000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- IDEA 无法显示项目目录结构解决
不要去网上看什么乱七八糟的骚教程,一点用都没有.直接按下列步骤操作: 1. 关闭IDEA, 2. 然后删除项目文件夹下的.idea文件夹3. 重新用IDEA工具打开项目