微信小程序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 建立对象的方法
Apr 21 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue获取data数据改变前后的值方法
Nov 07 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 判断字符串中是否包含html标签
2014/02/17 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
jquery 插件学习(三)
2012/08/06 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
总结js函数相关知识点
2018/02/27 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Django REST framework 分页的实现代码
2019/06/19 Python
详解python中的lambda与sorted函数
2020/09/04 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
小学教师管理制度
2014/01/18 职场文书
大学毕业感言一句话
2014/02/06 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
员工离职证明范本
2015/06/12 职场文书
工资证明格式模板
2015/06/12 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle