Vue使用base64图片验证码页面显示

简述

1.需求：图片中显示随机验证码，每次点击图片，图片会刷新
2.第一次进入页面时，在mounted中向后台发起图片请求
将后台提供的base64格式的图片，转格式存在变量中，将变量绑定到img标签的src属性上。
3、点击图片时，向后台发起请求

数据格式

数据格式

效果图

效果图

源码

组件

<template>
  <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules" label-width="80px">
       <el-form-item label="验证码" prop="code" class="code">
            <el-input style="width:400px;" v-model="registerForm.code" placeholder="请输入验证码">
              <img slot="append" :src="changeImage" @click="handleClickImge" class="codeImage" />
            </el-input>
          </el-form-item>
</el-form>
</template>
<script>
  export default {
    data() {
      return {
        changeImage: '',
        //注册对象
        registerForm: {
          code: '',
        },
      };
    },
    methods: {
      handleClickImge(){
            this.$axios.post('http://www.addres.com:9101/api/user/code/getCode').then(res => {
          this.changeImage = "data:image/jpeg;base64," + res.data.data;
          console.log(res)
        }).catch(err => {
          console.log(err)
          console.log("error");
        });
      },
    },
    mounted() {
      this.handleClickImge()  //加载刷新验证码
    }
  };
</script>

<style lang="less" scoped>
 //图片校验码
  .codeImage {
    width: 110px;
    height: 34px;
    // border: 1px solid #007ACC;
  }
</style>

补充

由于发送验证时无法准确定位是哪一个验证码，导致验证失败。后端修改加了一个识别码：mcode或者key
以下还加了校验请求

数据格式2

修改内容如下：

<script>
 import qs from 'qs'
  export default {
    data() {
//校验请求
 const checkImageCode = (rule, value, callback) => {
        const param = {
          'code': value,
          'mcode': this.imageMcode
        }
        this.$axios.post('http://cn:9101/api/user/code/checkCode', qs.stringify(param)).then(res => {
      if (res.data.code == 10000) {
           this.$message.success(res.data.msg)
          }else{
             this.$message(res.data.msg)
          }
        }).catch(err => {
          console.log(err)
          console.log("error");
        });
      }
      return {
        changeImage: '',
     //验证码的识别码
         imageMcode: '',
        //注册对象
        registerForm: {
          code: '',
        },
      };
    },
    methods: {
      handleClickImge(){
            this.$axios.post('http://www.addres.com:9101/api/user/code/getCode').then(res => {
        this.imageMcode = res.data.data.mcode
          this.changeImage = "data:image/jpeg;base64," + res.data.data.base64;
          console.log(res)
        }).catch(err => {
          console.log(err)
          console.log("error");
        });
      },
    },
    mounted() {
      this.handleClickImge()  //加载刷新验证码
    }
  };
</script>