前端获取图片验证码的四种格式

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一般在系统的注册、登录等页面需要验证用户个人身份信息，就需要用到【手机验证码】和【图片验证码】功能。前两天重写了登录模块，添加了图片验证码的形式，顺便总结了下，获取图片验证码的四种方式：

点击换一张，更改图片验证码

<img
    class="capchaImg"
    :src="captchaSrc"
    @click.stop="getCaptchaSrc()"
>
<span @click.stop="getCaptchaSrc()">{{ $t("换一张") }}</span>

1. 后台返回图片

1. 前端处理：直接返回接口地址，接口名为api.captcha

// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
    // 也可以处理图片
    this.captchaSrc = `${api.captcha}?time=${Date.now()}`;
    // 直接返回接口即可
    // return api.captcha + '/';
},

注意：如果需要获取验证码，同时也需要获取head信息，这样时会发送两次请求，就会有错，需要使用其他方法；如果不需要获取head信息，可以使用:

// 获取图片验证码
getCaptchaSrc() {
    const self = this;
    // 也可以处理图片
    this.captchaSrc = `${api.captcha}?time=${Date.now()}`;
    // 直接返回接口即可
    // return api.captcha + '/';
    // 获取filename，登录传递captchaKey(后台要求，通过captchaKey标识)
    axios({
        type: 'HEAD',
        url: api.captcha,
        complete: function (xhr){
            // 获取相关http response header中的filename（后台需要的字段）
            const filename = xhr.getResponseHeader('filename');
            self.formData.captchaKey = filename.split('.')[0];
        },
    });
},

2. 后台返回二进制流

1. 前端处理：使用blob处理

// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
    const self = this;
    this.$request({
        url: api.captcha,
        method: 'get',
    }).then(response => {
        const data = response.data;
        if (data.success) {
            let info = data.data;
            let blob = new Blob([info]);
            self.captchaSrc = URL.createObjectURL(blob);
        }
        else {
            self.$Message.error(data.message);
        }
    });
},

3. 后台返回url地址

// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
    const self = this;
    this.$request({
        url: api.captcha,
        method: 'get',
    }).then(response => {
        const data = response.data;
        if (data.success) {
            let info = data.data;
            self.captchaSrc = info.url;
        }
        else {
            self.$Message.error(data.message);
        }
    });
},

4. 返回base64样式

1. 将base64转化为src

// 获取图片验证码
getCaptchaSrc() {
    const self = this;
    self.$request({
        url: api.captcha,
        method: 'get',
    }).then(response => {
        const data = response.data;
        if (data.success) {
            let info = data.data;
            self.captchaSrc = 'data:image/png;base64,' + info.imageStr;
            self.formData.captchaKey = info.filename.split('.')[0];
        }
        else {
            self.$Message.error(data.message);
        }
    });
},