微信小程序选择图片(相册中选择/相机拍摄)

微信小程序中关于选择函数有专门的函数:

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。

参数

Object object

属性 类型 默认值 必填 说明
count number 9 最多可以选择的图片张数
sizeType Array.<string> ['original', 'compressed'] 所选的图片的尺寸
sourceType Array.<string> ['album', 'camera'] 选择图片的来源

但是直接使用chooseImage()函数时,小程序直接进入系统相册,无法选择相机拍摄,因此需要使用showActionSheet调出操作选择菜单,根据用户选择,在chooseImage函数中的sourceType中传入单一参数值,而不管是相册选择还是手机拍照,chooseImage都会返回图片路径,直接在url中调用路径就可以显示图片。

完整代码:

uploadImage(e){
    var vm = this
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      success: function(res) {
        if (res.tapIndex == 0) {
          vm.chooseUploadImage('album')
        } else if (res.tapIndex == 1) {
          vm.chooseUploadImage('camera')
        }
      },
      fail: function(res) {
        console.log(res.errMsg)
      }
    })
  },

  chooseUploadImage(type){
    var vm = this
    var row = vm.data.imageList.length
    if(row < 4){
      wx.chooseImage({
       count: 4-row,
       sizeType: ['compressed'],
       sourceType: [type],
       success (res) {
         var array = res.tempFilePaths
         for(var i=0;i<array.length;i++){
           vm.data.imageList[row] = array[i]
           row++
         }
         vm.setData({
           imageList:vm.data.imageList,
         })
       }
     }) 
     }else{
       wx.showToast({
         title: '最多上传4张图片',
         duration: 2000,
         icon:'none'
       })
     }
  }

效果图:

原文作者:喵喵叫的猴
电子邮箱:[email protected] 

发布了13 篇原创文章 · 获赞 23 · 访问量 4251

猜你喜欢

转载自blog.csdn.net/zjgo007/article/details/105465070