微信小程序 拍照/从相册中选择图片

微信小程序提供的众多API中，wx.chooseImage函数就是用来访问手机相册或摄像头的。调用该函数后，界面下方会呼出一个菜单，可以分别选择进入相册挑选已有照片或是打开摄像头进行拍照：

我们往WXML里新添一个按钮，点击该按钮就会触发wx.chooseImage的调用：

<view class="pic_item" data-type='10' bindtap="uploadPictures"><view wx:if="{{!picData.mstoreDoor}}"><view class="pic_add">+</view><view class="pic_txt">经营场所门头照</view><view class="mt20 pic_tips">图片格式支持：png、jpg、bmp、jpeg</view><view class="pic_tips">图片大小：≤ 2M</view></view><image wx:else src="{{picData.mstoreDoor}}" class="pic_img" mode="aspectFill" /><input hidden="{{hidden}}" name='storeDoorPic' value="{{licenseInfoDTO.storeDoorPic}}" /></view>

// 上传图片 okuploadPictures(e) {let pictype = e.currentTarget.dataset.type;let _this = this;wx.chooseImage({count: 1, // 默认9sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图sourceType: ["camera", "album"], // 可以指定来源是相册还是相机success: function (res) {let tempFilePaths = res.tempFiles[0].path;let size = res.tempFiles[0].size;// 判断图片是否超过大小if (size > 2097152) {return wx.showModal({content: "图片大小超过2M!",showCancel: false,});}// 判断图片类型let type = tempFilePaths.split(".")[1];if (!["png", "jpg", "bmp", "jpeg"].includes(type)) {return wx.showModal({content: "图片类型不支持!",showCancel: false,});}_this.upLoadPic(res.tempFilePaths[0], pictype);},});},

// 图片上传 赋值 okupLoadPic(tmpPath, picType) {let _this = this;wx.showLoading({ title: "处理中", mask: true });wx.uploadFile({url: 接口地址,header: {"content-type": "multipart/form-data",Authorization: "Bearer " + (wx.getStorageSync("token") || ""),},name: "file",dataType: "json",filePath: tmpPath, // 这个是图片的pathformData: { // 这里是你要传的别的参数picType,},success: function (res) {let d = JSON.parse(res.data); wx.hideLoading();if (d.code == 0) { let obj = {'02': ["licenseInfoDTO.lpLicFrontPic", "picData.mlpLicFont"], //法人身份证正面'03': ["licenseInfoDTO.lpLicBackPic", "picData.mlpLicBack"], //法人身份证反 } _this.setData({[obj[picType][0]]: JSON.stringify(d.data), // 接口数据[obj[picType][1]]: d.data.picUrl, // 页面展示数据}); console.log(_this.data.picData, '展示数据');console.log(_this.data.licenseInfoDTO, '提交数据');} else {wx.showModal({content: d.msg,showCancel: false,});}},fail: function (err) {console.log(err);},});},