vue版本：2.6.14
axios 版本：^0.27.2
场景描述：
在vue中想要将后端返回的二进制图片验证码显示在前端
关键代码如下（重点是 responseType: arraybuffer 的设置）：
<template>
...
<!--使用elementui图片组件进行回显-->
<el-image :src="codeUrl"></el-image>
...
</template>
<script>
export default {
data() {
return {
codeUrl: '' // 转换的验证码图片url
}
},
methods: {
async getCode() {
const { data: res } = await axios.get(请求验证码的接口地址, {responseType: 'arraybuffer' })
this.codeUrl = 'data:image/jpg;base64,' + arrayBufferToBase64(res);
}
}
}
</script>
二进制转 base64 方法
// 二进制转base64
arrayBufferToBase64 (buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary)
}
