参考文章:使用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数据:
普通二进制数据
具体原因要再看看哈哈哈
关于浏览器兼容问题:
image.png
