微信小程序 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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
javascript常用对话框小集
Sep 13 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
解决vue scoped html样式无效的问题
Oct 24 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使用SOAP调用.net的WebService数据
2013/11/12 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Python 的描述符 descriptor详解
2016/02/27 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python相对企业语言优势在哪
2020/06/12 Python
如何清空python的变量
2020/07/05 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
财务主管自我鉴定
2014/01/17 职场文书
对公司合理化的建议书
2014/03/12 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
婚前保证书范文
2015/02/28 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android