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

最新推荐文章于 2024-12-07 00:30:38 发布

It_BeeCoder

最新推荐文章于 2024-12-07 00:30:38 发布

阅读量4.2k

点赞数

分类专栏： 29 微信小程序

29 微信小程序专栏收录该内容

28 篇文章

订阅专栏

这篇文章主要介绍了微信小程序 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 
                   > 
                  
                   < 
                   br 
                   > 
                  
号外：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 
                  
                   }   
                  
原文链接：http://www.cnblogs.com/xianfeng-zhang/p/6634527.html