微信小程序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 相关文章推荐
基于javascript 闭包基础分享
Jul 10 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
jsonp跨域请求详解
Jul 13 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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实现基于openssl的加密解密方法
2016/09/30 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
python先序遍历二叉树问题
2017/11/10 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
wxpython绘制圆角窗体
2019/11/18 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
行政经理岗位职责
2013/11/09 职场文书
本科生自荐信
2014/06/18 职场文书
合作协议书格式
2014/08/19 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2014年信访工作总结
2014/11/17 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
社区敬老月活动总结
2015/05/07 职场文书
安全生产奖惩制度
2015/08/06 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技