前言

登录界面经常会有验证码，验证码的实现方式也有很多，我目前做过以下两种：

1.调用接口获取验证码 + canvas画布渲染

2.后端返回图片（数据流），前端显示

这两种方式都比较简单，本次项目技术栈为：vue2.6 + axsio ，接下来一起看看把~

一、p调用接口获取验证码 + canvas画布渲染？

这个比较简单，就是需要自己写一份canvas ,将后端获取过来得验证码显示出来，后续将验证码和识别码一起传递给后端，后端校验账户密码验证码是否一致。

1.编写canvas组件

这里我把他写成一个组件

2.使用组件

引入该组件并命名为identifyCode

import IdentifyCode from '@/components/identifyCode'

初始化得时候获取后端返回得验证码

created(){
this.getCode()
}
//获取验证码   
async getCode() {try {await XX().then((res) => {this.identifyCode = res})} catch (err) {console.log(err)}}

二、后端返回图片（图片流），前端显示

首先我们明确两个点：

普通请求接收的时候是json格式，图片流的接收模式可选两种：blob和arraybuffer。
blob和arraybuffer本质上都是二进制数据。如果使用blob我们只需要用 window.URL.createObjectURL(res)就可以得到图片链接；如果使用arraybuffer，我们需要将其转为base64的格式。

好啦，下面就开始啦~

首先我们先设置标签变量，如下：

1.blob

请求设置，代码如下：

export function getCaptcha () {return request({url: /getCaptcha,method: 'get',responseType: 'blob' //选择接收方式为blob})
}

图片处理，代码如下：

  getCaptcha (e) {getCaptcha().then(res => {this.codeImg = window.URL.createObjectURL(res) // 这里调用window的URL方法console.log(this.codeImg, '地址')}).catch(err => {console.log(err)})},

2.arraybuffer

请求设置，代码如下：

// 图片验证码
export function getCaptcha () {return request({url: /getCaptch,method: 'get',responseType: 'arraybuffer'})
}

图片处理，代码如下：

  getCaptcha (e) {getCaptcha().then(res => {//1. btoa表示 base64转ASCII ,对应的还有 atob 表示 ASCII转base64//2. Unit8Arrat() 是arraybuffer里面的一种类型const url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))this.codeImg = urlconsole.log(this.codeImg, '地址')}).catch(err => {console.log(err)})},

关于blod和arraybuffer的区别和具体用法，参考：前端二进制学习（三）

当然还有其它的二进制流，向上传文件或图片的时候用到的：File、FileReader、FormData，感兴趣可以自己去了解一下。