微信小程序 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 相关文章推荐
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
理解javascript中的with关键字
Feb 15 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
微信小程序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 数组实例说明
2008/08/18 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
酒店总经理助理岗位职责
2014/02/01 职场文书
会计个人实习计划书
2014/08/15 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技