微信小程序 chooseImage选择图片或者拍照


Posted in Javascript onApril 07, 2017

微信小程序 chooseImage选择图片或者拍照

一、使用API wx.chooseImage(OBJECT)

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对select标签的控制(option选项/select)
Jan 31 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
php email邮箱正则
2008/10/08 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php不用正则验证真假身份证
2013/11/06 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP目录操作实例总结
2016/09/27 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
小学教师事迹材料
2014/01/13 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
孙振耀退休感言
2015/08/01 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS