我攻克的技术难题：前端获取后端图片

​在完成项目的验证码功能时，需要从后端获取验证码图片。前后端都是第一次做验证码，不清楚需要如何操作并且没有沟通好，导致在获取验证码图片这事上花费了很多的时间。终于！！！今天顺利完成了任务，现将前端获取后端图片这个过程总结一下，希望能给需要的人一些帮助，也希望有大佬能指点指点。

前后端传输图片的三种数据形式

1.图片地址

当后端生成验证码时，后端可以将图片存放至云服务器上，再将图片地址发送给前端访问。

2.base64

以上两种，直接将res.data赋给img标签的src中即可查看到图片

3.文件流（前端需做地址解析）

在前端打印出来的请求数据是如图，一串unicode乱码。但是利用postman和浏览器调试返回都能看到图片，对于我这个前端小白当时真的是一脸懵逼。

后端返回二进制图片前端乱码解决方案_后端返回图片乱码_Yoki_S的博客-CSDN博客

然后我开始查询资料，当我找到上面这篇文章时，我便开始有了些眉目。就是要将这个看不懂的转化成上面说到的第二种数据形式

即要将文件流转码成base64，要么后端转，要么前端转。

不过这是利用axios访问的后端数据，而我是uniapp。于是我开始往这个方向开始查找答案。

通过查找找到这条博客(๑•̀ㅂ•́)و✧完美解决，两步走！

uniapp 获取文件流展示图片_uniapp图片流_我要长头发！的博客-CSDN博客

两步

1）调用接口时要加responseType:arrayBuff

       uni.request({
					url: "http://xxxxx/Login/getvercode",
					method: 'GET',
					data: [], //请求参数
					responseType: "arraybuffer",
					success: res => {
						this.src = 'data:image/png;base64,' + btoa(new Uint8Array(datas).reduce((datas, byte) => datas + String.fromCharCode(byte), ''))
					},
					fail: () => {},
					complete: () => {},
				});

2）转blob地址

this.src = 'data:image/png;base64,' + btoa(new Uint8Array(datas).reduce((datas, byte) => datas + String.fromCharCode(byte), ''))

​