vue项目经验：图形验证码接口get请求处理

最新推荐文章于 2024-07-25 10:57:43 发布

转载最新推荐文章于 2024-07-25 10:57:43 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/EnSnail/p/8444391.html

文章标签：

#javascript #后端 #php #ViewUI

本文介绍了一种处理图形验证码的方法，通过前端JavaScript与后端API交互获取验证码图片，并从响应头中提取必要信息。文章详细展示了如何使用axios发送GET请求获取二进制数据流，并将其转换为Base64编码的图片格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　一般图形验证码处理：

直接把img标签的src指向这个接口，然后在img上绑定点击事件，点击的时候更改src的地址（在原来的接口地址后面加上随机数即可，避免缓存）

<img :src="codeImg" class="img-code" @click="updateCode" alt="验证码" title="点击换一张">

export default {
  data () {
      codeImg: `${this.baseUrl}/captcha/captcha.php
  },
  methods: {
    updateCode() {
        this.codeImg = `${this.baseUrl}/captcha/captcha.php?=${Math.random()}`;
      }
  }  
}

　　但是，有一天，后端说，在接口的响应头里放了一些信息，需要提交form表单时，一并提交。然后用axios的get请求，尴尬了，响应的是数据流，显示不出图片了。

　　解决方案如下：将数据流转换为图片

　　首先html结构不变，把js改了。

export default {
  data () {
     imgCode: '',    // 一定要有 
     captchaId: ''   // 后端需要的响应头中的信息参数
  },
  created () {
     this.updateCode()
  },
  methods: {
    updateCode () {
      let _this = this
      this.axios.get(`${this.urlBase}/user/captcha?=${Math.random()}`, {
        responseType: 'arraybuffer'
      }).then((res) => {
        // 后端需要的响应头中的信息参数赋值
        this.captchaId = res.headers['x-ocp-captcha-id']
        // 转换
        let codeImg =  'data:image/png;base64,' + btoa(
          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        _this.codeImg = codeImg
      })
    },    
  }  
}