微信小程序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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
JS+CSS实现过渡特效
Jan 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在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
javascript String 对象
2008/04/25 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js中生成map对象的方法
2014/01/09 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
iview实现图片上传功能
2020/06/29 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
使用Python实现一个简单的项目监控
2015/03/31 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python实现小球弹跳效果
2019/05/10 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
django中ImageField的使用详解
2020/12/21 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
机械专业应届生求职信
2013/09/21 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js