微信小程序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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
layui实现三级联动效果
Jul 26 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
js 目录列举函数
2008/11/06 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python实现图片批量压缩程序
2018/07/23 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python是怎样处理json模块的
2020/07/16 Python
Python txt文件如何转换成字典
2020/11/03 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
接待员岗位责任制
2014/02/10 职场文书
六查六看自查材料
2014/02/17 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
就业协议书
2014/09/12 职场文书
2019军训心得体会
2019/06/27 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
Django项目如何正确配置日志(logging)
2021/04/29 Python
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python