Vue页面调用微信API上传图片
由于原生input上传图片无法在选择图片时控制选择的张数，所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传。选择图片后上传到微信服务器，然后通知后台去微信服务器下载到本地服务器。因为需要又要限制选择图片的大小，直接上代码。首选要通过微信公众号appid等参数配置使用微信API权限。
//选择图片方法chooseImage(){return new Promise((resolve, reject)=>{let chooseCount = 9;//最大只能设置为9wx.chooseImage({count: chooseCount, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album','camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片_this.localIds = res.localIds;let localIdsLen = localIds.length;//以下通过localId获取对应的base64，通过计算获取图片大小let i = 0;function getLocalImgDataWX() {wx.getLocalImgData({localId:localIds[i],success:function(response){let localData = response.localData;if (localData.indexOf('data:image') != 0) {//判断是否有这样的头部localData = 'data:image/jpeg;base64,' + localData}//第一个替换的是换行符，第二个替换的是图片类型，因为在IOS机上测试时看到它的图片类型时jgp，//这不知道时什么格式的图片，为了兼容其他设备就把它转为jpeglocalData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');let itemSize = _this.getImgByteSize(localData);//获取base64大小_this.imgSize.push(itemSize);i++;if(i < localIdsLen){getLocalImgDataWX();} else {resolve("结束了");}},fail: function (res) {_this.$vux.toast.show({type: "text",width: '20em',text: JSON.stringify(res)});resolve("getLocalImgDataFail");}});}getLocalImgDataWX();},fail: function (res) {_this.$vux.toast.show({type: "text",width: '20em',text: JSON.stringify(res)});resolve("chooseImageFail");}});})}//选择图片并判断大小async chooseImageBox(){let n = await this.chooseImage();if(n.indexOf("Fail") !== -1){this.$vux.toast.show({type: "text",width: '12em',text: '图片选择报错，请稍后重试！'});return;}for(var j = 0 ; j < this.imgSize.length ; j++){if(this.imgSize[j]<100000){this.$vux.toast.show({type: "text",width: '12em',text: '图片大小必须在100k以上'});this.imgSize = [];return}if(this.imgSize[j]>=5120000){this.$vux.toast.show({type: "text",width: '12em',text: '图片大小必须在5M以下'});this.imgSize = [];return}}if(this.imgSize.length>0){//上传到微信服务器await this.uploadImageWX(this.localIds);this.imgSize = [];}}//获取base64大小getImgByteSize(data) {let size = 0if (data) {// 获取base64图片byte大小const equalIndex = data.indexOf('='); // 获取=号下标if (equalIndex > 0) {const str = data.substring(0, equalIndex); // 去除=号const strLength = str.length;const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小size = Math.floor(fileLength); // 向下取整} else {const strLength = data.length;const fileLength = strLength - (strLength / 8) * 2;size = Math.floor(fileLength); // 向下取整}}return (size * 1.657)},
在开发到真机测试的过程中也是遇到了很多问题：
1、计算后的图片大小和真实的图片大小不一致，判断并不准确，不知道是wx.getLocalImgData返回的base64不准确还是通过base64计算图片大小的方法和真实图片大小有很大的误差（目前还未找到答案）。最后通过大量的测试，粗略的估算出真实的图片大小和计算出的图片大小比例在1.657左右。
2、后端在去微信服务器下载图片的过程中，有时图片下载完会解析失败（.ssl.SSLException: SSL peer shut down incorrectly）目前发现当图片太大时就会解析失败，所以在选择图片的时候默认选择的是压缩图。
3、通过wx.getLocalImgData获取的base64有时会缺失一部分，当做url显示的时候显示不全，怀疑这也是导致后台解析图片失败的原因。
以上三个大问题并没有找到合理的答案和解释，希望有人帮忙解答一下。
上面的方法可能不是最好的方法，而且很麻烦，仅仅是记录一下在开发过程中遇到的问题。
