微信小程序 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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Vue formData实现图片上传
Aug 20 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
如何在vue 中引入使用jquery
Nov 10 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 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python模拟登录12306的方法
2014/12/30 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
使用python实现省市三级菜单效果
2016/01/20 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python创建字典的八种方式
2019/02/27 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
小学语文国培感言
2014/03/04 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
服务宗旨标语
2014/07/01 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
大学生党课心得体会
2016/01/07 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android