參考文章:使用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