微信小程序 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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
几种响应式文字详解
May 19 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
vue - props 声明数组和对象操作
Jul 30 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
中国第一家无线电行
2021/03/01 无线电
Zend引擎的发展 [15]
2006/10/09 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Django数据库表反向生成实例解析
2018/02/06 Python
Python SQLite3简介
2018/02/22 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
对python模块中多个类的用法详解
2019/01/10 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python 转换文本编码实现解析
2019/08/27 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
基于opencv实现简单画板功能
2020/08/02 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
行政专员岗位职责范本
2014/08/26 职场文书
导航工程专业自荐信
2014/09/02 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Java死锁的排查
2022/05/11 Java/Android
python解析照片拍摄时间进行图片整理
2022/07/23 Python