微信小程序 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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
jquery validate表单验证插件
Sep 06 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
package.json文件配置详解
Jun 15 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
vue页面跳转实现页面缓存操作
Jul 22 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
我的群发邮件程序
2006/10/09 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php代码书写习惯优化小结
2013/06/20 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript call方法使用说明
2010/01/11 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
django实现用户登陆功能详解
2017/12/11 Python
Python判断两个对象相等的原理
2017/12/12 Python
Django自定义manage命令实例代码
2018/02/11 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python的历史与优缺点整理
2020/05/26 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
班级聚会策划书
2014/01/16 职场文书
餐厅筹备计划书
2014/04/25 职场文书
物理教育专业求职信
2014/06/25 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
html5表单的required属性使用
2021/07/07 HTML / CSS
SQL中的三种去重方法小结
2021/11/01 SQL Server