WTM(ASP.NET Core)vue中展示api返回二进制图片

        相信很多小伙伴，使用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>