一、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)
      }