小程序接受圖片流展示圖片

最近做了一個小程序,由於各種原因吧,公司不願意讓圖片以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的格式,那樣頁面就可以直接展示了,好了,具體就這些.