最近做了一個小程式,由於各種原因吧,公司不願意讓圖片以url或者base64等格式進行直接訪問,後端返回圖片流,前端去進行展示,相信很多人第一次聽到的時候都會很迷茫,所以在這裡記錄一下自己的操作過程,希望能幫到迷茫的你.

首先說一下後端返回的資料:

 相信你看到這個地方的時候已經很懵逼了,這是什麼東西,

這個就是後端返回的原始資料流,然後前端需要去處理一下才能直接用的,具體處理方式如下:

 wx.request({
      url: glob.nbUrl + "business/queryPhoto/" + id,
      data: {},
      method: "GET",
      header: {
        
 
"content-type": "application/x-www-form-urlencoded", // 預設值
        "X-Access-Token": glob.XAccessToken,
        openId: glob.openid,
      },
      responseType: "arraybuffer",
      success(res) {
        wx.hideLoading();
        if (res.statusCode == "200") {
          let url = "data:image/png;base64," + wx.arrayBufferToBase64(res.data);
          let data = self.data.detailData;
          data[idx].data[index].image =
 
 url;
          self.setData({
            detailData: data,
          });
        } else {
          wx.showToast({
            title: "服務錯誤",
            icon: "none",
            duration: 2000,
          });
        }
      },
    });

通過上面方法我們就可以在頁面中看到我們的圖片了,最主要的地方就是上面標註紅色的地方.

首先說一下responseType: "arraybuffer",這個代表什麼意思,這個就是我們把後端返回的資料型別進行轉換,小程式api裡面也有,可以自己去看一下.

wx.ArrayBuffer (res.data) 這個就是我們用來顯示圖片的了,上面只是轉換了後端返回的資料型別格式,但是我們還是不能直接使用的,需要通過ArrayBuffer 來對我們已經轉換的二進位制改成base64的格式,那樣頁面就可以直接展示了,好了,具體就這些.