登录页面后台返回验证码图片

后台请求地址. 需要注意的是.需要在后面补上设置
设置请求数据类型 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), ‘’))