base64验证码实现

最新推荐文章于 2025-05-15 11:01:42 发布

原创最新推荐文章于 2025-05-15 11:01:42 发布 · 914 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

开发项目专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何通过API生成图片验证码，包括请求接口的URL、使用GET方法获取Base64编码的图片以及在前端页面中展示验证码的过程。

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

1. 生成图片验证码接口

请求地址： /api-auth/forget/create/captchaImage

请求方式： GET

请求头：详见约定

请求参数：无

请求 URL：

GET http://localhost:8000/api-auth/forget/create/captchaImage

返回参数

参数名称	参数类型	参数说明
img	String	图片的Base64编码
code	String	验证码答案
uuid	String	图片Id

2. 实现代码：

接口：

// 生成图片验证码
    export function getCaptchaImage() {
        return requestZhzh({
            url: `/api-auth/forget/create/captchaImage`,
            method: "get",
        });
    }

页面方法：

 <el-form-item prop="code">
              <p class="elFormP-srzh" prop="code">验证码</p>
              <el-input v-model="formSrzh.code" type="text" auto-complete="off" placeholder="请输入图形验证码" @keyup.enter.native="handleNextSrzh" class="elFormInput-srzh" style="width:70% !important"></el-input>
              <img :src="codeUrl" @click="getCode" alt="验证码" class="inputImg2-srzh" />
</el-form-item>


data(){
    return{
        // 输入账号--验证码
      codeUrl: '',
    }
}
created() {
     this.getCode()
}
methods: {
// 输入账号--获取验证码
    getCode() {
      getCaptchaImage()
        .then(res => {
          this.codeUrl = 'data:image/gif;base64,' + res.data.img
          this.formSrzh.uuid = res.data.uuid
        })
        .catch(error => {
          console.error(error)
        })
    },
}