需求,项目中的登录页面用到了验证码,后端生成啦图片数据,前端调取接口获取数据,显示在页面
template
<el-form-item prop="code">
<el-input
ref="code"
prefix-icon="el-icon-document-checked"
clearable
placeholder="验证码"
v-model="loginForm.code"
style="width: 70%"
@keyup.enter.native="login"
></el-input>
<div @click="changeCode()" style="float: right">
<img :src="imgPath" title="点击刷新" alt="点击刷新" />
</div>
</el-form-item>
data
data() {
return {
imgPath: '',
}
}
methods
// 点击验证码刷新验证码
changeCode() {
this.$axios
.get('/login/jpg', {
responseType: 'arraybuffer',
})
.then((res) => {
window.sessionStorage.setItem(
'token',
res.headers['content-disposition']
)
this.imgPath = `data: image/jpeg;base64,${btoa(
new Uint8Array(res.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
''
)
)}`
})
},
说明:获取验证码成功后会返回一个token值,点击‘登录’按钮登录成功以后会重新获取一个token值,覆盖掉获取器验证码成功后获取的token值。