这次的项目做到一个功能：第三方用户跳转到平台需要根据用户的id动态生成小程序码，达到扫描二维码免登录的效果，而后台给的小程序码是文件流而不是url地址，那么就需要前端去转换一下这两者
先贴下具体转换代码
js
function transformArrayBufferToBase64 (buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
for (var len = bytes.byteLength, i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
let dataStr = transformArrayBufferToBase64(res)
this.qrcodeImg = "data:image/png;base64," + dataStr;html
<img :src="qrcodeImg" alt="">注意点：
使用ajax时需要将responseType设置为arraybuffer才能被识别，这点很重要！以下是本项目的实际应用，感兴趣的可以继续往下看，赶时间的直接复制上面那行代码并且看清注意事项就OK了~
首先，在封装的axios中定义一个get方法，该方法的responseType为arraybuffer（buffer转base64或者下载excel文件流的时候都可以用）
getBuffer(url, urlData, data = 0) {
let oUrl=url;
// 创建一个promise对象
this.promise = new Promise((resolve, reject) => {
if (data == 0) {
url += '?';
for (const item in urlData) {
url += item + '=' + urlData[item] + '&';
};
} else if (data == 1) {
for (const item in urlData) {
url += '/' + urlData[item];
};
}
axios.get(url, {
responseType: 'arraybuffer'
}).then((res) => {
this.countlyMonitorResponse(oUrl, 'get', res.data.code);
if (this._isStatus(res.data)) {
resolve(res.data);
}
}).catch((err) => {
console.log(err)
})
})
return this.promise;
};其次，定义一个混入对象用于转换buffer为base64，使用mixins为了之后可在多个页面中复用
qrcodeMixins.js
export default {
data() {
return {
qrcodeImg: '',
}
},
mounted() {
this.reqQrcode()
},
methods: {
reqQrcode() {
let params = {
userId: this.$store.state.userId.userId,
userName: this.$store.state.userId.userName,
gender: 1,
hasBind: true,
}
this.$ajax.getBuffer('/extra/user/getUserPic', params).then(res => {
function transformArrayBufferToBase64 (buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
for (var len = bytes.byteLength, i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
let dataStr = transformArrayBufferToBase64(res)
this.qrcodeImg = "data:image/png;base64," + dataStr;
})
},
},
}最后，在需要的页面引入minxin，并且将图片的src地址改为qrcodeImg
<template>
<div class="introduce">
<img :src="qrcodeImg" alt="">
</div>
</template>
<script>
import qrcodeMixin from './qrcodeMixin'
export default {
name: 'introduce_pc',
mixins: [qrcodeMixin],
data() {
return { }
},
methods: {
}
}
</script>
