微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
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: , // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
_this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
}
})

这里说说sourcetype.默认是从相册获取和使用相机拍照,跟微信现在选择图片的界面一样,第一格是拍照,后面的是相册照片.
这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个API.
示例代码:
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
}
})
}
})
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传的更多相关文章
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
本文转自:http://blog.csdn.net/qq_31383345/article/details/53014610 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: ...
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...
- 微信小程序开发之如何哪获取微信小程序的APP ID
微信小程序的开发工具,在新建项目的时候,默认提示填写APP ID,如果不填写AppID 也是可以本地测试和开发的,但是无法通过手机调试,只能在开发工具里查看 如果需要真机调试微信小程序,需要安装微信6 ...
- 【微信小程序开发】之如何获取免费ssl证书【图文步骤】
微信小程序要求所有网络请求都走ssl加密,因此我们开发服务端接口需要配置为https 这篇文章介绍一下如何 在 startssl 申请一个免费的ca证书. 1. 打开网站 https://www.s ...
- 微信小程序开发之修改和获取变量的值
在小程序开发过程中有两种变量,一种是定义在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}}< ...
随机推荐
- GAS Syntax
GAS or GNU as syntax is a different form of syntax for assembly language files, known also as AT& ...
- SQL基础总结——20150730
SQL SQL 指结构化查询语言 SQL 使我们有能力訪问数据库 SQL 是一种 ANSI(美国国家标准化组织) 的标准计算机语言 SQL 是一门 ANSI 的标准计算机语言.用来訪问和 ...
- [D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4
When your data contains discrete, non-numeric property values that you need to format or convert bef ...
- 在 Java 中如何进行 BASE64 编码和解码
BASE64 编码是一种常用的字符编码,在很多地方都会用到.JDK 中提供了非常方便的 BASE64Encoder 和 BASE64Decoder,用它们可以非常方便的完成基于 BASE64 的编码和 ...
- USB 3.0规范中译本 第2章 术语及缩略语
本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 本章列出并定义本规范通篇将使用的术语及缩略语. 术语/略缩语 定义 ACK(确认包) 表示积极肯定的握手包. ...
- [Angular Unit Testing] Shallow Pipe Testing
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...
- [Linux] Use find to search for filename patterns
Learn how to use find to identify filenames matching specified patterns. We'll use find to identify ...
- Django之分页显示文章
1.项目:http://www.cnblogs.com/jasonhaven/p/7493422.html 2.任务描述:页面分页显示文章 3.源代码 后台: from django.core.pag ...
- NBU7.0 RMAN 异机恢复 not found in NetBackup catalog
问题描写叙述: RMAN> run { 2> allocate channel t1 type 'sbt_tape'; 3> send 'NB_ORA_SERV=netback ...
- Windows批处理(cmd/bat)常用命令
Windows批处理(cmd/bat)常用命令 一.总结 一句话总结: 1.批量处理图片的方式? PS批处理是基于强大的图片编辑软件Photoshop的,用来批量处理图片的脚本: 2.大量的重复的操作 ...