微信小程序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的渐进增强与平稳退化浅谈
Nov 12 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
解决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
967 个函式
2006/10/09 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
酒店销售主管岗位职责
2014/01/04 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
刊首寄语大全
2014/04/11 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
让生命充满爱观后感
2015/06/08 职场文书
导游词之韩国济州岛
2019/10/28 职场文书