微信小程序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 打印页面代码
Mar 24 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
JavaScript数值类型知识汇总
Nov 17 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
js href的用法
2010/05/13 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JavaScript用select实现日期控件
2015/07/17 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python解析yaml文件过程详解
2019/08/30 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
上海奥佳笔试题面试题
2016/11/16 面试题
小学教师节活动方案
2014/01/31 职场文书
小学庆六一活动方案
2014/02/28 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
停课通知书
2015/04/24 职场文书
中小企业员工手册范本
2015/05/14 职场文书
李强感恩观后感
2015/06/17 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫