微信小程序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 图片缩放(按比例)控制代码
May 27 Javascript
JS面向对象编程浅析
Aug 28 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python递归计算N!的方法
2015/05/05 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
详解Python中的文件操作
2016/08/28 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python自动下载图片的方法示例
2020/03/25 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
销售经理竞聘书
2014/03/31 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
商家认证委托书格式
2014/10/16 职场文书
车队安全员岗位职责
2015/02/15 职场文书
民事辩护词范文
2015/05/21 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL