验证码功能前后端实现以及使用createObjectURL下载内容以及生成图片

参考文章:使用vue.js axios 下载功能?
参考:ajax请求二进制流图片并渲染到html中img标签
使用CreateObjectURL实现下载文件以及渲染图片
HTML5 进阶系列：文件上传下载
java生成验证码
createObjectURL的api文档说明

需求

需求:需要完成图片验证码功能,前端技术栈vue+axios,后端主要是springboot+mybatis.因为使用前端分离,前端通过请求验证码图片,并且将后端和验证码图片一起返回的序列同时存储,校验验证码时,带上序列一同校验.后端将验证码存到redis中,key为验证码序列,value为验证码.校验时,能够用前端的序列找到的验证码和前端传过来的验证码一致,即验证码验证通过.
其中,验证码序列是设置在响应头返回的.传统的接收短信验证码的方式不能获取响应头的内容.后端生成验证码图片,验证验证码的全部代码
这里就涉及一个问题,传统获取短信验证码的方式如下:

<template>
  <img
       class="get_verification"
       :src="captchaSrc"
       ref="captcha"
       alt="captcha"
       @click.prevent="onClickChangeCaptcha"
       >
</template>
<script>
    onClickChangeCaptcha() {
      this.$refs.captcha.src = this.captchaSrc + "?date=" + Date.now();
    }
</script>

所以为了获取到响应头的内容,前端只能改为用axios发送responseType为blob即可使用axios获取响应头的内容,
完整代码参考:前端登录验证码校验全部代码
主要代码:

 onClickChangeCaptcha() {
      reqcaptCha().then(res => {
        console.log(res);
        const blob = res.data;
        var img = this.$refs.captcha;
        const URL = window.webkitURL || window.URL;
        img.onload = function(e) {
          //清除url对象
          URL.revokeObjectURL(img.src);
        };
        img.src = URL.createObjectURL(blob);
      });
    },

至此功能基本完成,但是在前端继续开发过程中,却出现了问题,原因是使用mock拦截Ajax请求,但是该请求是可以正常返回的,只是和使用mock返回的不一样,即返回的不是blob数据,是二进制数据,尝试转化为blob,但是无法正常显示.
正常不适用mock返回的数据,使用responseType:'blob'自动将数据转化为blob:

 

正常的blob数据

使用mock后返回的不是blob数据:

 

普通二进制数据

具体原因要再看看哈哈哈

关于浏览器兼容问题:

 

转自：https://www.jianshu.com/p/63396b98e1ac