微信小程序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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 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作的文本留言本的例子(二)
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
Js切换功能的简单方法
2010/11/23 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
发布你的Python模块详解
2016/09/15 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python反编译学习之字节码详解
2019/05/19 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
实习自我评价怎么写
2013/12/02 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
教师一帮一活动总结
2014/07/08 职场文书
大学生实训报告总结
2014/11/05 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫