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、后端在去微信服務器下載圖片的過程中，有時圖片下載完會解析失敗（javax.net.ssl.SSLException: SSL peer shut down incorrectly）目前發現當圖片太大時就會解析失敗，所以在選擇圖片的時候默認選擇的是壓縮圖。
3、通過wx.getLocalImgData獲取的base64有時會缺失一部分，當做url顯示的時候顯示不全，懷疑這也是導致后臺解析圖片失敗的原因。

以上三個大問題并沒有找到合理的答案和解釋，希望有人幫忙解答一下。
上面的方法可能不是最好的方法，而且很麻煩，僅僅是記錄一下在開發過程中遇到的問題。

總結

以上是生活随笔為你收集整理的Vue调用微信JSSDK上传图片(wx.uploadImage)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。