微信小程序 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 相关文章推荐
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
js调试工具Console命令详解
Oct 21 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js实现旋转木马效果
Mar 17 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
ES6函数和数组用法实例分析
May 23 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微信支付实例解析
2016/07/22 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js星星评分效果
2014/07/24 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
python基础教程之五种数据类型详解
2017/01/12 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python绘制圆柱体的方法
2018/07/02 Python
详解python中的装饰器
2018/07/10 Python
Python内存读写操作示例
2018/07/18 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
养殖项目策划书范文
2014/01/13 职场文书
水电工岗位职责
2014/02/12 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
励志演讲稿200字
2014/08/21 职场文书
学生会主席任命书
2015/09/21 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书