vue登录中验证码的实现

vue登录中验证码的实现？

html结构部分代码：

  <div class="vercode">
             <img @click="getCaptcha" class="code-img" id="checkCodeItCode" alt="lenovo">
             <span class="code-span">{{count}}</span>
  </div>

js实现？

<script>
import { v4 } from 'uuid';
// 获取验证码
  getCaptcha() {
    let obj = document.getElementById("checkCodeItCode")
    let uuid = v4()
    axios.post(`/auth/kaptcha?${uuid}`, {}, 'blob').then(res => {
      const dataInfo = res.data;
      this.captchakey = res.headers.captchakey           //captchakey验证码key标识
      let reader = new window.FileReader()
      reader.readAsArrayBuffer(dataInfo)                // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据
      reader.onload = function (e) {
        const result = e.target.result
        const contentType = dataInfo.type
        const blob = new Blob([result], { type: contentType })         // 生成blob图片,需要参数(字节数组, 文件类型)
        const url = window.URL.createObjectURL(blob)      // 使用Blob创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,
        // 产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
        obj.src = url     // 可以直接使用,比如用在img.src上
      }
      this.getCode()    //调用验证码倒计时方法
    })
  },


  // 重新倒计时
  getCode() {
    this.count = '60'
    if (!this.timer) {
      this.timer = setInterval(() => {
        if (this.count > -1) {
          this.count--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
          this.count = '60'
        }
      }, 1000)
    }
  },



</script>