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

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

• • 记录一下

记录一下

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！