微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)


Posted in Javascript onAugust 22, 2018

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明:

参数 类型 必填 说明
count Number 最多可以选择的图片张数,默认9
sizeType StringArray original 原图,compressed 压缩图,默认二者都有
sourceType StringArray album 从相册选图,camera 使用相机,默认二者都有
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

success返回参数说明:

参数 类型 说明 最低版本
tempFilePaths StringArray 图片的本地文件路径列表  
tempFiles ObjectArray 图片的本地文件列表,每一项是一个 File 对象 1.2.0

File 对象结构如下:

字段 类型 说明
path String 本地文件路径
size Number 本地文件大小,单位:B
var util = require('../../utils/util.js')
Page({
 data:{
  src:"../image/pic4.jpg"
 },
 gotoShow: function(){var _this = this
  wx.chooseImage({
   count: 9, // 最多可以选择的图片张数,默认9
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
   // success
   console.log(res)
   _this.setData({
    src:res.tempFilePaths
   })
   },
   fail: function() {
   // fail
   },
   complete: function() {
   // complete
   }
  })
 }

二、图片路径进行数据绑定

<view class="container">
 <view>
 <button type="default" bindtap="gotoShow" >点击上传照片</button> 
 </view>
 <view>
 <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

号外:

1、wx.chooseImage 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

var _this = this
  wx.chooseImage({
   count: 9, // 最多可以选择的图片张数,默认9
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
   // success
   console.log(res)
   _this.setData({
    src:res.tempFilePaths
   })
   },
   fail: function() {
   // fail
   },
   complete: function() {
   // complete
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
简单实现js倒计时功能
Feb 13 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
Node 模块原理与用法详解
May 13 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
You might like
新版PHP将向Java靠拢
2006/10/09 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
Linux常见面试题
2016/10/04 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
付款承诺函范文
2015/01/21 职场文书
整脏治乱工作简报
2015/07/21 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
python模板入门教程之flask Jinja
2022/04/11 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android