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

最近做了一个小程序,由于各种原因吧,公司不愿意让图片以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的格式,那样页面就可以直接展示了,好了,具体就这些.