前言

在实际的项目中验证码登录几乎是每个开发人员的必备操作技能了，但是前端获取到后端的验证码数据有很多种方式，对于初级开发人员来说有时候会比较的懵，所以在此总结开发中比较常见的的几种验证方式，便于以后开发中遇到后可以直接使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、情况一：数据是图片文件流

前端需要展示验证码图片，希望后台直接返回的是图片地址，但是后端给的是的文件流而不是一个图片地址，所以这种情况需要把文件流转为base64的格式展示出来
在这里插入图片描述
这种情况是没有加 responseType: 'arraybuffer’导致的

在这里插入图片描述

<el-form-item label=""><el-inputtype="code"v-model.trim="form.code"placeholder="请输入验证码"style="width: 105px"@keyup.enter.native="login"></el-input><img:src="codeImg"class="codeImg"@click="oNcodeImg"/>
</el-form-item>oNcodeImg() {// var num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）this.$axios({method: 'post',url: '/sys/user/code?random=' + this.random,responseType: 'arraybuffer' //该字段需要添加，不然返回的res.data会是乱码}).then((res) => {console.log('返回的验证码数据:', res);if (res.headers['content-type'].indexOf('json') !== -1) {this.tips('验证码获取次数过多，请稍后重试', 'warning');} else {this.codeImg ='data:image/png;base64,' +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));}});},

二、情况二：直接返回是图片

返回的响应里直接是验证码，接收的时候甚至不用ajax/axios…
在这里插入图片描述

<!-- 验证码 --><el-form-item prop="code"><div class="vertify-code-box"><el-inputv-model.trim="loginForm.code"type="code"placeholder="请输入验证码"class="vertify-code"ref="code"@keyup.enter.native="login"></el-input><div class="imgDiv"><img:src="imgSrcUrl"@click="oNcodeImg"class="img"/></div></div></el-form-item>oNcodeImg() {//直接访问，不需要ajax/axios我到现在都不是很清楚这什么道理this.imgSrcUrl ="/api/web/adminuser/captcha.jpg?random=" + Math.random() * 10;console.log("this.imgSrcUrl", this.imgSrcUrl);// this.$axios({//   method: "GET",//   url: this.codeImgSrc,// })//   .then(() => {//     this.imgSrcUrl = "http://localhost:8080/api" + this.codeImgSrc;//   })//   .catch((error) => {//     console.log(error, "login error");//   });},

情况三：uni小程序的登录验证

与情况一类似后端传过来的数据是图片文件流，但是小程序上代码要做一些处理如下
在这里插入图片描述

<view class="input flex_between"><u-inputv-model="login.code"maxlength="6"type="code":custom-style="inputStyle"placeholder-style="font-size:32rpx;line-height:40rpx;color:#CED4E0"placeholder="请输入验证码"height="68"/><view class="code"><img:src="codeImg"@click="oNcodeImg"/><!--:src="codeImg" <text @tap="getCode">{{ tips }}</text> --></view></view>//获取与web一样的验证码oNcodeImg() {this.util.http_demo_1('POST',this.server.getCode + '?random=' + this.random,{ responseType: 'arraybuffer' },(res) => {console.log('res:', res);console.log(res.headers['Content-Type'].indexOf('image') == -1);if (res.headers['Content-Type'].indexOf('image') == -1) {this.tips('验证码获取次数过多，请稍后重试', 'warning');} else {const arrayBuffer = res.data;//将arrayBuffer数据转换成base64格式即可显示let url = `data:image/jpeg;base64,${uni.arrayBufferToBase64(arrayBuffer)}`;this.codeImg = url;}},(res) => {console.log('错误:', res);});}