前端处理接口返回来的文件流的两种操作

wenLi2023-11-27 17:20

前言

本文打算总结下，本人在实际项目中，经常遇到的关于处理后端接口返回文件流后的两种操作；哦，对了，还有一种最入门的基操，就是get请求，直接window.open(...)，这种在这里就不列了哈~

第一种：post请求，接口返回文件流，将其在浏览器中下载

代码

这种是除了window.open之外，算是很常见的一种处理方式了，话不多说，代码如下：

这上面这个，我是对axios进行了二次封装，这里的_post，其实就是axios的post请求哈

效果

然后我们就实现了下载咯~

第二种：在img标签的src中，要显示后端接口返回过来的数据流

emmm，这种真的一言难尽呐，因为token权限的问题，所以我们就算要请求图片资源，也要在请求头上拼接x-token,所以就出来了这种，

代码

我先进行了组件封装，代码如下：

dart 复制代码

<template>
    <img :class="className" ref="img  alt=""/>
</template>
<script>
export default {
    props: {
        src: {
            type:String,
            default:''
        },
        className: {
            type:String,
            default:''
        }
    },
    watch: {
        src: {
            handler(newVal) {
                if(newVal){
                    this.handlePreview(newVal)
                }
            },
            immediate:true,
        }
    },
    methods: {
        async handlePreview(item) {
            const url = item || ""
            const headers = {
                "x-token":sessionStorage.token, //这里就是要传的token
                responseType:'blob',    //注意这个要传blob类型
           }
            if(url){
                this.$nextTick(() => {
                    this._get(url,{},header).then(res => {
                        let blob = new Blob([res],{type:'image/jpeg})
                        let imgUrl = URL.createObjectURL(blob)
                        this.$refs.img.src = imgUrl
                        this.$refs.img.onload = () => {
                            this.$refs.img && URL.revokeObjectURL(this.$refs.img.src)
                        }
                    }
                })
            }
        }
    }
}
</script>

使用：

然后图片的路径都变成了这种格式：

效果

最终，我们的图片都可以访问出来咯~