请求后端返回的验证码显示的情况

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

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

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

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

前端需要展示验证码图片，希望后台直接返回的是图片地址，但是后端给的是的文件流而不是一个图片地址，所以这种情况需要把文件流转为base64的格式展示出来

这种情况是没有加 responseType: 'arraybuffer’导致的

<el-form-item label="">
          <el-input
            type="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-input
              v-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-input
          v-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);
        }
      );
    }

最后

目前遇到的验证码登录就以上三种情况比较多了，还有一种是手机短信验证，那个相对简单，只要一个按钮发送请求就可以了。