axios 后端返回流转成图片

axios请求返回流 转换成图片

<img :src="codesrc" @click="getImgCode" class='br_img'>

实现方法（从后端返回获取出后端需要参数 randomstr）

// async/await
async getImgCode() {
	const res = await axios.get(`/code?code=${new Date()}`, {
	    responseType: "arraybuffer"
	})
	const { headers: { randomstr = '' } } = res
	this.codesrc = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => {   // btoa创建一个base-64编码的字符串
		return data + String.fromCharCode(byte)   // fromCharCode 可接受一个指定的Unicode,然后返回一个字符串
	}, ''))
}

getImgCode(){
	axios
	.get(`/code?code=${new Date()}`, {
		responseType: 'arraybuffer'
	})
	.then(response => {
		this.randomStr = response.headers.randomstr;
		return 'data:image/png;base64,' + btoa(
		new Uint8Array(response.data)
			.reduce((data, byte) => data + String.fromCharCode(byte), '')
		);
	}).then(data => {
		this.codesrc = data
	})
}