有时候后端在接口返回图片时,不是使用服务器图片地址返回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图片,返回出去使用。