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

绝地灬酷狼 2023-08-17 17:04 13阅读 0赞

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

## 需求 ##

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

<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获取响应头的内容,  
完整代码参考:[前端登录验证码校验全部代码][Link 2]  
主要代码:

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:

![format_png][]

正常的blob数据

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

![format_png 1][]

普通二进制数据

具体原因要再看看哈哈哈

关于浏览器兼容问题:

![format_png 2][]

转自：[https://www.jianshu.com/p/63396b98e1ac][https_www.jianshu.com_p_63396b98e1ac]

[vue.js axios]: https://www.zhihu.com/question/263323250
[ajax_html_img]: https://blog.csdn.net/qq_29287973/article/details/78355558
[CreateObjectURL]: https://www.cnblogs.com/hhhyaaon/p/5928152.html
[HTML5]: https://zhuanlan.zhihu.com/p/27677175
[java]: https://www.jianshu.com/p/009914797af2
[createObjectURL_api]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL#Browser_compatibility
[Link 1]: https://github.com/WinneyFung/yummy_food_project/blob/master/yummy_food_server/com_food_service/src/main/java/com/food/service/controller/CaptchaController.java
[Link 2]: https://github.com/WinneyFung/yummy_food_project/blob/master/yummy_food_client/src/page/Login/Login.vue
[format_png]: /images/20230808/f775a51eef2a43aebf229f75b081cf59.png
[format_png 1]: /images/20230808/a7fbfd27b120470695650868a58d6781.png
[format_png 2]: /images/20230808/aedddb85a7144e81ab648cd2ccac63fb.png
[https_www.jianshu.com_p_63396b98e1ac]: https://www.jianshu.com/p/63396b98e1ac