vue-element-admin 添加验证码

一、views/login/index.vue登录页面

显示验证码

  <img :src="imgSrc" class="imgse" @click="getImage" />

进入页面进行调用

 created () {
    this.getImage()
  },

  methods: {
    // 获取验证码
    getImage () {
      getImageApi().then(res => {
        this.imgSrc = res
      })
    }
   }

二、api/user.js页面

调用后台验证码

export function getImageApi () {
  return request({
    url: '/api/sysUser/image',
    method: 'post',
    responseType: 'blob'
  })
}

三、utils/request.js页面

返回拦截器response中
在if (res.code !== 200)代码块中添加

const indexs = response.config.responseType
      console.log(indexs)
      if (indexs === 'blob') {
        const blob = new Blob([res], { type: 'image/png' })
        const url = window.URL.createObjectURL(blob)
        console.log(url)
        return Promise.resolve(url)
      }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值