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

前言

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

使用:

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

效果

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

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky5 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld5 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记6 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷7 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求