參考文章:使用vue.js axios 下載功能?
參考:ajax請求二進(jìn)制流圖片并渲染到html中img標(biāo)簽
使用CreateObjectURL實(shí)現(xiàn)下載文件以及渲染圖片
HTML5 進(jìn)階系列：文件上傳下載
java生成驗(yàn)證碼
createObjectURL的api文檔說明
需求
需求:需要完成圖片驗(yàn)證碼功能,前端技術(shù)棧vue+axios,后端主要是springboot+mybatis.因?yàn)槭褂们岸朔蛛x,前端通過請求驗(yàn)證碼圖片,并且將后端和驗(yàn)證碼圖片一起返回的序列同時存儲,校驗(yàn)驗(yàn)證碼時,帶上序列一同校驗(yàn).后端將驗(yàn)證碼存到redis中,key為驗(yàn)證碼序列,value為驗(yàn)證碼.校驗(yàn)時,能夠用前端的序列找到的驗(yàn)證碼和前端傳過來的驗(yàn)證碼一致,即驗(yàn)證碼驗(yàn)證通過.
其中,驗(yàn)證碼序列是設(shè)置在響應(yīng)頭返回的.傳統(tǒng)的接收短信驗(yàn)證碼的方式不能獲取響應(yīng)頭的內(nèi)容.后端生成驗(yàn)證碼圖片,驗(yàn)證驗(yàn)證碼的全部代碼
這里就涉及一個問題,傳統(tǒng)獲取短信驗(yàn)證碼的方式如下:
<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>
所以為了獲取到響應(yīng)頭的內(nèi)容,前端只能改為用axios發(fā)送responseType為blob即可使用axios獲取響應(yīng)頭的內(nèi)容,
完整代碼參考:前端登錄驗(yàn)證碼校驗(yàn)全部代碼
主要代碼:
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);
});
},
至此功能基本完成,但是在前端繼續(xù)開發(fā)過程中,卻出現(xiàn)了問題,原因是使用mock攔截Ajax請求,但是該請求是可以正常返回的,只是和使用mock返回的不一樣,即返回的不是blob數(shù)據(jù),是二進(jìn)制數(shù)據(jù),嘗試轉(zhuǎn)化為blob,但是無法正常顯示.
正常不適用mock返回的數(shù)據(jù),使用responseType:'blob'自動將數(shù)據(jù)轉(zhuǎn)化為blob:
使用mock后返回的不是blob數(shù)據(jù):
具體原因要再看看哈哈哈
關(guān)于瀏覽器兼容問題:
