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

前言

本文打算总结下,本人在实际项目中,经常遇到的关于处理后端接口返回文件流后的两种操作;哦,对了,还有一种最入门的基操,就是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>

使用:

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

效果

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

相关推荐
柚子8162 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者17 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子44 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip3 小时前
总结一期正则表达式
javascript·正则表达式