有时候后端在接口返回图片时,不是使用服务器图片地址返回url,而是使用blob文件流的形式直接丢给前端,需要前端做处理展示。

let blob=new Blob([res], {type: "image/png"})
	blobToBase64(blob).then(reb=>{
		setQrCode(reb)
})
const blobToBase64=(blob)=> {
	return new Promise((resolve, reject) => {
	const fileReader = new FileReader();
	fileReader.onload = (e) => {
		resolve(e.target.result);
	};
	 // readAsDataURL
	fileReader.readAsDataURL(blob);
	fileReader.onerror = () => {
		reject(new Error('文件流异常'));
	};
	});
}

接收blob文件流之后,new一个Blob,调用blobToBase64方法,通过文件流读取,生成base64图片,返回出去使用。