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

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

这篇关于小程序接受图片流展示图片的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持