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