Vue頁(yè)面調(diào)用微信API上傳圖片

由于原生input上傳圖片無(wú)法在選擇圖片時(shí)控制選擇的張數(shù)，所以選擇調(diào)用微信JSSDK提供的方法調(diào)用相冊(cè)選擇圖片進(jìn)行上傳。選擇圖片后上傳到微信服務(wù)器，然后通知后臺(tái)去微信服務(wù)器下載到本地服務(wù)器。因?yàn)樾枰忠拗七x擇圖片的大小，直接上代碼。首選要通過(guò)微信公眾號(hào)appid等參數(shù)配置使用微信API權(quán)限。

//選擇圖片方法 chooseImage(){return new Promise((resolve, reject)=>{let chooseCount = 9;//最大只能設(shè)置為9wx.chooseImage({count: chooseCount, // 默認(rèn)9sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album','camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有success: function (res) {let localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片_this.localIds = res.localIds;let localIdsLen = localIds.length;//以下通過(guò)localId獲取對(duì)應(yīng)的base64，通過(guò)計(jì)算獲取圖片大小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}//第一個(gè)替換的是換行符，第二個(gè)替換的是圖片類(lèi)型，因?yàn)樵贗OS機(jī)上測(cè)試時(shí)看到它的圖片類(lèi)型時(shí)jgp，//這不知道時(shí)什么格式的圖片，為了兼容其他設(shè)備就把它轉(zhuǎn)為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("結(jié)束了");}},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: '圖片選擇報(bào)錯(cuò)，請(qǐng)稍后重試！'});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){//上傳到微信服務(wù)器await this.uploadImageWX(this.localIds);this.imgSize = [];} } //獲取base64大小 getImgByteSize(data) {let size = 0if (data) { // 獲取base64圖片byte大小const equalIndex = data.indexOf('='); // 獲取=號(hào)下標(biāo)if (equalIndex > 0) {const str = data.substring(0, equalIndex); // 去除=號(hào)const strLength = str.length;const fileLength = strLength - (strLength / 8) * 2; // 真實(shí)的圖片byte大小size = Math.floor(fileLength); // 向下取整} else {const strLength = data.length;const fileLength = strLength - (strLength / 8) * 2;size = Math.floor(fileLength); // 向下取整}}return (size * 1.657) },

在開(kāi)發(fā)到真機(jī)測(cè)試的過(guò)程中也是遇到了很多問(wèn)題：
1、計(jì)算后的圖片大小和真實(shí)的圖片大小不一致，判斷并不準(zhǔn)確，不知道是wx.getLocalImgData返回的base64不準(zhǔn)確還是通過(guò)base64計(jì)算圖片大小的方法和真實(shí)圖片大小有很大的誤差（目前還未找到答案）。最后通過(guò)大量的測(cè)試，粗略的估算出真實(shí)的圖片大小和計(jì)算出的圖片大小比例在1.657左右。
2、后端在去微信服務(wù)器下載圖片的過(guò)程中，有時(shí)圖片下載完會(huì)解析失敗（javax.net.ssl.SSLException: SSL peer shut down incorrectly）目前發(fā)現(xiàn)當(dāng)圖片太大時(shí)就會(huì)解析失敗，所以在選擇圖片的時(shí)候默認(rèn)選擇的是壓縮圖。
3、通過(guò)wx.getLocalImgData獲取的base64有時(shí)會(huì)缺失一部分，當(dāng)做url顯示的時(shí)候顯示不全，懷疑這也是導(dǎo)致后臺(tái)解析圖片失敗的原因。

以上三個(gè)大問(wèn)題并沒(méi)有找到合理的答案和解釋，希望有人幫忙解答一下。
上面的方法可能不是最好的方法，而且很麻煩，僅僅是記錄一下在開(kāi)發(fā)過(guò)程中遇到的問(wèn)題。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。