小程序模板网

微信小程序chooseImage(从本地相册选择图片或使用相机拍照)

一、使用API wx.chooseImage(OBJECT)

 

				
  1. var util = require('../../utils/util.js')
  2. Page({
  3. data:{
  4. src:"../image/pic4.jpg"
  5. },
  6. gotoShow: function(){var _this = this
  7. wx.chooseImage({
  8. count: 9, // 最多可以选择的图片张数,默认9
  9. sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
  10. sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
  11. success: function(res){
  12. // success
  13. console.log(res)
  14. _this.setData({
  15. src:res.tempFilePaths
  16. })
  17. },
  18. fail: function() {
  19. // fail
  20. },
  21. complete: function() {
  22. // complete
  23. }
  24. })
  25. }

二、图片路径进行数据绑定

 

				
  1. <view class="container">
  2. <view>
  3. <button type="default" bindtap="gotoShow" >点击上传照片</button>
  4. </view>
  5. <view>
  6. <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
  7. </view>
  8. </view>

号外:    1、wx.chooseImage 调用相机或相册    2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image>数据绑定    3、js中动态修改文件路径

 

				
  1. var _this = this
  2. wx.chooseImage({
  3. count: 9, // 最多可以选择的图片张数,默认9
  4. sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
  5. sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
  6. success: function(res){
  7. // success
  8. console.log(res)
  9. _this.setData({
  10. src:res.tempFilePaths
  11. })
  12. },
  13. fail: function() {
  14. // fail
  15. },
  16. complete: function() {
  17. // complete
  18. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23476.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询