后端返回二进制文件如何处理

249 阅读1分钟

一般情况下首先图片一般是以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:不能直接存储 以后详细整理