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

小灰灰 2021-03-30 15:53 666阅读 0赞

一、使用API [wx.chooseImage(OBJECT)][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 }

[wx.chooseImage_OBJECT]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject