相信很多小伙伴，使用WTM框架都是mvc layui当后台，然后用代码生成器或者自己写api当服务。制作微信小程序、spa单页面程序。我在这样使用的过程中遇到了图片展示的问题。
WTM为我们实现准备好的图片（文件）接口地址是/api/_file/GetFile/{id}，调用方法为get。接口返回的是二进制文件流，这样很多平时处理网络地址的小伙伴直接懵逼了，该怎么办？
下面为大家展示一下亲测的在vue中处理二进制的图片的办法。我采用的是nui-app中的vue。
一、发送ajax请求，并将二进制数据转化为Base64图片
GetImg(){var that = this;uni.request({url: 'https://localhost:44300/api/_file/GetFile/EB359A76-7D5F-4D4B-BB5E-0B8029557C95', //仅为示例，并非真实接口地址。header:{Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwZWE2Y2UyNi02YjNlLTQ1MTAtODM0YS1lYjkwMWFiOGNhMmUiLCJuYW1lIjoi6LaF57qn566h55CG5ZGYIiwiZXhwIjoxNTk2ODk2Mzc3LCJpc3MiOiJodHRwOi8vbG9jYWxob3N0IiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdCJ9.f4wEtuwHyfbR7ZtELnBLLdwmW0xrnTArb3H2MLGLRhA'},responseType: "arraybuffer",success: (response) => {that.imgdata = 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')); }});}
注意：
- 必须设置JWT请求头，不然给你返回是要求登录的html。
- btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')); 这句完成二进制转base64
- 转化完成的base64图片前面加上'data:image/png;base64,'，变为img标签可解析的base64图片格式。
最后在img标签上给src赋值即可
<image :src="imgdata" mode="widthFix"></image>
