[转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610
今天遇到微信小程序的用户头像设置功能,做笔记.
先上gif:
再上代码:
小demo,代码很简单.
1.index.wxml
- <!--index.wxml-->
- <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
- <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>
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 说明:
这里说说sourcetype.默认是从相册获取和使用相机拍照,跟微信现在选择图片的界面一样,第一格是拍照,后面的是相册照片.
这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个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
- }
- })
- }
- })
我的博客:http://blog.csdn.net/qq_31383345
[转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传的更多相关文章
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="choose ...
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...
- 【微信小程序开发】之如何获取免费ssl证书【图文步骤】
微信小程序要求所有网络请求都走ssl加密,因此我们开发服务端接口需要配置为https 这篇文章介绍一下如何 在 startssl 申请一个免费的ca证书. 1. 打开网站 https://www.s ...
- 微信小程序开发之如何哪获取微信小程序的APP ID
微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看 如果需要真机调试微信小程序,需要安装微信6 ...
- 微信小程序开发之修改和获取变量的值
在小程序开发过程中有两种变量,一种是定义在app,js里面的globalData定义的全局变量,另一种是在各个页面app,data里面的定义的变量. 一:全局变量的定义,获取值,赋值,修改 app.j ...
- 微信小程序开发(十一)获取手机的完整详细信息
// succ.wxml <view style='position:absolute; top:30%; left:35%;font-size:36rpx'>{{name}}:签到成功. ...
- 微信小程序开发(六)获取手机信息
// succ.js var app = getApp() Page({ data: { mobileModel: '', // 手机型号 mobileePixelRatio: '', // 手机像素 ...
- 微信小程序开发(十)获取手机的经纬度
// succ.wxml <view>经度:{{lon}}</view> <view>纬度:{{lat}}</view> // succ.js var ...
- 微信小程序开发(九)获取手机连接的wifi信息
// succ.wxml <view>WIFI ssid:{{wifissid}}</view> <view>WIFI bssid:{{wifiBssid}}< ...
随机推荐
- [C#学习笔记]Func委托与Action委托
学习一项新知识的时候,最好的方法就是去实践它. 前言 <CLR via C#>这本神书真的是太有意思了!好的我的前言就是这个. Fun 如果要用有输入参数,有返回值的委托,那么Func委托 ...
- 总结目前为止学到的关键字(break,continue,private,static,this,super,final,abstract)
1.控制跳转语句:break(结束) 使用的场景: a.循环当中 b.switch break关键字需要注意的问题: 1.break关键字只能用于循环和switch语句当中,其本质就是结束整段语句的意 ...
- UVA 11426 GCD - Extreme (II)(欧拉函数打表 + 规律)
Given the value of N, you will have to find the value of G. The definition of G is given below:Here ...
- 用MVC5+EF6+WebApi 做一个小功能(三) 项目搭建
一般一个项目开始之前都会有启动会,需求交底等等,其中会有一个环节,大讲特讲项目的意义,然后取一个高大上的项目名字,咱这是一个小功能谈不上项目,但是名字不能太小气了.好吧,就叫Trump吧.没有任何含义 ...
- JPA_映射双向多对多的关联关系(转)
双向多对多的关联关系 转自(http://www.cnblogs.com/lj95801/p/5011537.html) 双向多对多的关联关系(抽象成A-B)具体体现:A中有B的集合的引用,同时B中也 ...
- OpenResty 最佳实践 (1)
此文已由作者汤晓静授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. OpenResty 发展起源 OpenResty(也称为 ngx_openresty)是一个全功能的 Web ...
- iOS开发网络篇—GET请求和POST请求的说明与比较
1.GET请求和POST请求简单说明 1.1 创建GET请求 // 1.设置请求路径 NSString *urlStr = [NSString stringWithFormat:@"http ...
- “全栈2019”Java第九十五章:方法中可以定义静态局部内部类吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 小A的旅行(绿豆蛙的归宿)【期望DP】
Description 给出一个有向无环的连通图,起点为1,终点为N,每条边都有一个长度.小A从起点出发,走向终点.到达每一个顶点时,如果有K条离开该点的道路,小A可以选择任意一条道路离开该点,并且走 ...
- ObjectARX动态添加AutoCAD传统下拉菜单入门篇(一)
ObjectARX动态添加传统下拉菜单入门篇 图文by edata , 转载注明出处 http://www.cnblogs.com/edata AutoCAD 添加传统下拉菜单有很多种方式,比较典型 ...