微信小程序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 相关文章推荐
jquery 图片上传按比例预览插件集合
May 28 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jquery延迟对象解析
Oct 26 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
JavaScript实现快速排序的方法分析
Jan 10 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
js实现3D旋转相册
Aug 02 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
解决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
html中select语句读取mysql表中内容
2006/10/09 PHP
php getsiteurl()函数
2009/09/05 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
简单的Jquery全选功能
2013/11/07 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
JS array数组检测方式解析
2020/05/19 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
点球小游戏python脚本
2018/05/22 Python
Python操作json的方法实例分析
2018/12/06 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python中return如何写
2020/06/18 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
夏季奶茶店创业计划书
2014/01/16 职场文书
便利店促销方案
2014/02/20 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
MySQL 不等于的三种使用及区别
2021/06/03 MySQL