微信小程序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 学习笔记(十五)
Jan 28 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 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实现Mysql读写分离
2013/06/28 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
jQuery 操作XML入门
2008/12/25 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python绘制数码晶体管日期
2021/02/19 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
小学后勤管理制度
2014/01/14 职场文书
大学社团计划书
2014/05/01 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
初三数学教学反思
2016/02/17 职场文书
初三化学教学反思
2016/02/22 职场文书
区域销售大会开幕词
2016/03/04 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript