登录页面后台返回验证码图片
记录一下
后台请求地址. 需要注意的是.需要在后面补上设置
设置请求数据类型 responseType: ‘arraybuffer’
接口如下:
export const getCode = randomStr => {
return request({ url: `/xxxx/code/${randomStr},responseType: 'arraybuffer' })
}
html:
<el-form-item prop="code">
<el-input v-model="formLogin.code" type="text" placeholder="验证码">
<template slot="append">
<img class="login-code" :src="codeImg" @click="getCode" />
</template>
</el-input>
</el-form-item>
js
async getCode() {
this.randomStr = new Date().getTime()
let res = await this.$api.user.getCode(this.randomStr)
this.codeImg = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
}
重点是这段代码:
this.codeImg = ‘data:image/png;base64,’ + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ‘’))