微信小程序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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
原生JS实现音乐播放器
Jan 26 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue多次循环操作示例
2019/02/08 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
成品库仓管员岗位职责
2014/04/06 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
活动费用申请报告
2015/05/15 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android