簡述

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>