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

前言

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

使用:

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

效果

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

相关推荐
Sally璐璐3 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062711 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿1213825 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴43 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel