脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 微信小程序 chooseImage

微信小程序 chooseImage选择图片或者拍照

 更新时间：2017年04月07日 10:54:41   投稿：lqh  
这篇文章主要介绍了微信小程序 chooseImage选择图片或者拍照的相关资料,需要的朋友可以参考下

微信小程序 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使用btoa和atob来进行Base64转码和解码

    javascript使用btoa和atob来进行Base64转码和解码

    javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现
    2017-03-03
  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应详解

    这篇文章主要介绍了微信小程序 图片宽高自适应的相关资料,需要的朋友可以参考下
    2017-05-05
  • 微信小程序 scroll-view组件实现列表页实例代码

    微信小程序 scroll-view组件实现列表页实例代码

    这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载 ，需要的朋友可以参考下
    2016-12-12
  • 微信小程序 生命周期函数详解

    微信小程序 生命周期函数详解

    这篇文章主要介绍了微信小程序 生命周期函数的相关资料,需要的朋友可以参考下
    2017-05-05
  • js中闭包结合递归等于柯里化原理解析

    js中闭包结合递归等于柯里化原理解析

    这篇文章主要为大家介绍了闭包结合递归等于柯里化的原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 超级强大的表单验证

    超级强大的表单验证

    超级强大的表单验证...
    2006-06-06
  • 微信小程序 开发之快递查询功能的实现

    微信小程序 开发之快递查询功能的实现

    这篇文章主要介绍了微信小程序 开发之快递查询功能的实现的相关资料,这里实现微信小程序查询快递的功能，需要的朋友可以参考下
    2017-01-01
  • 前端JavaScript中的class类

    前端JavaScript中的class类

    这篇文章主要介绍了前端JavaScript中的class,类是用于创建对象的模板，JavaScript中的Class更多的还是语法糖，本质上绕不开原型链，下面就来看看关于JavaScript class类的详细内容吧
    2021-10-10
  • 项目中常用的 .env 文件原理源码解析

    项目中常用的 .env 文件原理源码解析

    这篇文章主要为大家介绍了项目中常用的 .env 文件原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 常用的JavaScript数组方法

    常用的JavaScript数组方法

    一说到JavaScript的数组，大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等，今天小编就给大家分享几个开发中常用的js数组方法即他们的用法。需要的朋友可以参考下面文章的具体内容
    2021-09-09

最新评论