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 。

  1. tip: 最大并发限制是 10 个
  2. 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
})
}
})

  1. tip: 最大并发限制是 10 个
  2. tip: 默认超时时间和最大超时时间都是 60s
  3. tip: 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
  4. tip: 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效

微信小程序---选择图片和调用微信拍照的更多相关文章

  1. 微信小程序选择图片,查看图片信息,浏览图片,图片上传

    依次点击链接请查看以下步骤 选择图片: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageob ...

  2. 微信小程序 --- 选择图片和拍照

    wx.chooseImage 选择图片 / 进行拍照 //获取应用实例 const app = getApp() Page({ data: { onOff:true }, btnclick:funct ...

  3. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  4. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  5. 微信小程序天坑--图片汉字命名

    图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.

  6. 微信小程序开发系列六:微信框架API的调用

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  7. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  8. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  9. 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...

随机推荐

  1. springboot中使用servlet时返回结果乱码问题

    在总的配置文件:application.properties中做一个配置,把我的问题解决了. #编码格式 spring.http.encoding.force=true spring.http.enc ...

  2. keras训练大量数据的办法

    最近在做一个鉴黄的项目,数据量比较大,有几百个G,一次性加入内存再去训练模青型是不现实的. 查阅资料发现keras中可以用两种方法解决,一是将数据转为tfrecord,但转换后数据大小会方法不好:另外 ...

  3. lightinthebox程序bug zencart

    1.清空旧产品分类,新增分类与产品,前台首页不显示中间栏,提示无产品:布局设置 -(Main Page - Opens with Category)首页显示某分类,把新增的某分类ID填上或者设为0即可 ...

  4. 2017 CVTE Windows开发一面 3.7

    下午3点接到了个广州打过来的电话,电话面试总体时间比较短,35分钟. 考察内容: 1.讲实习: 因人而异,将了之前公司做的项目,刚好和面的岗位匹配,面试官听完之后还不忘垂壁一下他们的产品. 2.C#事 ...

  5. Python 文件I/O Ⅳ

    Python里的目录: 所有文件都包含在各个不同的目录下,不过Python也能轻松处理.os模块http://www.xuanhe.net/有许多方法能帮你创建,删除和更改目录. mkdir()方法 ...

  6. 什么情况下JVM会立即对类进行初始化

    虚拟机规范严格规定了有且只有5种情况必须立即对类进行“初始化”(加载.验证.准备等阶段在此之前开始). 遇到new.getstatic.putstatic.invokestatic等4条字节码指令时. ...

  7. wx小程序知识点(七)

    七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...

  8. 清除eclipse 里面主函数的加载记录 launch configuration删除

    我们eclipse  里面执行的程序,应用 把他记录下来,生成配置文件. 当我们导出行的jar包的时候,需要制定运行的主函数. 会看到很多的历史主程序,带来方便的同时,也产生了影响. 需要清除写记录的 ...

  9. Socket编程-基础使用

    最后更新:2019-10-25 一 基本概念 socket, 又称为"套接字"或者"插座". 是操作系统提供的一种进程间通信机制.目前大多用于不同网络设备之间的 ...

  10. jquery 动态增加删除行

    最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋 ...