一般情况下首先图片一般是以Base64或者网络地址等格式返回给前端,但是有的时候会以Ascii乱码形式返回给前端,这时候需要前端去处理
第一步(省略axios二次封装步骤)
export default function getData(){
return {
url:"请求地址",
methods:"请求方法"
responseType:"Blob"
}
}
第二步
const imgUrl:Ref<string>=ref("")
function getImg(){
getData().then((res)=>{
this.imgUrl=window.URL.createObjectURL(res.data)
})
}
第三步
<template>
<el-image :url="imagurl"></el-image>
</tempalte>
扩充:其他二进制形式及不同
ArrayBuffer和Blob极为接近,说的不对,尽情私聊
BloB:存储二进制大对象,一般存储图片,视频,音频这种二进制非常大的文件
Blob另一个作用是分片文件,一般用于上传
Blob.slice()用于切片
ArrayBuffer:不能直接存储 以后详细整理