這篇文章主要介紹了微信JS-SDK選擇圖片遇到的坑有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)阜寧,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

有個(gè)需求要在微信企業(yè)號(hào)里面做開(kāi)發(fā)，有個(gè)功能是選擇圖片，使用input標(biāo)簽肯定是不管用了，Android手機(jī)上不能多選，所以使用了微信的JS-SDK提供的相關(guān)API，這個(gè)地方真的是有坑。按照文檔直接引入js文件即可，如果使用的是Vue，也可以使用weixin-js-sdk，兩種方式都可以。

圖片在Android上無(wú)法預(yù)覽

js-sdk的chooseImage 接口返回的結(jié)果是localId，類似于wxLocalResource://xxxxxx，如果想得到它的base64串需要再調(diào)用getLocalImgData方法，因?yàn)槲覀兒笈_(tái)接口里需要用到這個(gè)base64串，所以通過(guò)這個(gè)接口來(lái)獲取base64串作展示，而不是用文檔里介紹的方法。那這里有個(gè)坑，從Android獲取的localData是不帶有base64前綴的，要處理一下。

selectImage: function () {
  let context = this;
  wx.chooseImage({
    count: 9,
    sizeType: ['compressed'], 
    sourceType: ['album', 'camera'], 
    defaultCameraMode: "normal", 
    success: function (res) {
      // localIds是在data里定義的一個(gè)localId數(shù)組
      context.localIds = res.localIds;
      // 不能直接遍歷這個(gè)數(shù)組
      context.updateBase64Data(context.localIds.shift());
    },
    fail: function (res) {
      alert('選擇圖片失敗:' + res.errMsg);
    },
  });
},
updateBase64Data: function (localId) {
  let context = this;
  wx.getLocalImgData({
    localId: localId, // 圖片的localID
    success: function (res) {
      let localData = res.localData;
      let prefix = 'base64,';
      let index = localData.indexOf(prefix);
      let actData = localData;
      // 我現(xiàn)在是設(shè)置參數(shù)，如果是展示的話則應(yīng)該是添加頭部data:image/jpeg;base64,
      if (index > -1) {
        actData = localData.substring(index + 7);
      }
      // base64Array是在data里定義的一個(gè)base64串?dāng)?shù)組
      context.base64Array.push(actData);
      
      if (context.localIds.length > 0) {
        context.updateBase64Data(context.loaclIds.shift());
      } else {
        // 執(zhí)行處理
      }
    },
    fail: function (res) {
      alert('選擇圖片失敗:' + res.errMsg);
    },
  });
},

getLocalImgData獲取多張圖片無(wú)響應(yīng)

chooseImage方法獲取到是一個(gè)localId的數(shù)組，如果直接遍歷這個(gè)數(shù)組去調(diào)用getLocalImgData時(shí)它只會(huì)執(zhí)行一次，后面的無(wú)論怎樣都不會(huì)執(zhí)行，猜測(cè)應(yīng)該是跟它localId的獲取有關(guān)系。所以采取了上面代碼中遞歸的方式調(diào)用，當(dāng)連續(xù)調(diào)用uploadImage上傳圖片時(shí)也要這么做。

Android無(wú)法選擇原圖

盡管在chooseImage方法可以通過(guò)sourceType字段指定是原圖還是壓縮后的圖，但是只要調(diào)用了getLocalImgData方法，那獲取到的base64串展示一定是模糊的。你在想是不是Android上面不能使用原圖啊，錯(cuò)了，仔細(xì)看IOS上面的圖也是不清楚的，測(cè)試發(fā)現(xiàn)確實(shí)是這樣，原圖1.8M，使用js-sdk選擇的原圖只有不到240K，那為什么Android會(huì)模糊但是IOS比較清楚呢，你是不是又想這不是IOS和Android系統(tǒng)的區(qū)別吧，把同一張圖片通過(guò)getLocalImgData方法獲取到的base64串做比對(duì)發(fā)現(xiàn)，Android上得到的base64串前綴是以gCM開(kāi)頭，而IOS則是以/9j/開(kāi)頭，從PC上選擇的圖也是以/9j/開(kāi)頭，自己解析的圖片也是以/9j/開(kāi)頭，所以不是因?yàn)閴嚎s變模糊了，是因?yàn)槭褂昧瞬灰粯拥木幋a變模糊了。如果真的想選擇原圖，先把圖片上傳到微信服務(wù)器，然后使用獲取臨時(shí)素材的接口https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID，把圖片下載下來(lái)，經(jīng)測(cè)試這樣其實(shí)也是有壓縮的，這個(gè)是企業(yè)號(hào)的API如果用公眾號(hào)地址是https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID。代碼就不貼了，與上面的基本一致。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信JS-SDK選擇圖片遇到的坑有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!