【Vue】使用Axios请求下载后端返回的文件流,并能够提示后端报错信息

【需求】使用Axios请求下载后端返回的文件流,下载失败时提示信息不写死,按照后端返回的信息进行提示。

一、需求分析

看到这个需求的时候,有人可能会很疑惑,这不是直接就能获取到吗,直接message.error()弹框就完事了,有什么问题。
我们先来模拟一下,点击按钮下载文件,请求后端接口,后端返回文件流,前端通常会设置响应类型为blob, responseType: 'blob',如:

// 下载文件
export function HandleDownLoadFile(params) {return request({url: '/xxxx/download',method: 'get',params,responseType: 'blob'});
}

我们打印响应数据看看是什么,可以发现res.data是一个Blob格式的数据,和正常的格式已经不同了,后端返回的message也获取不到了。

  • 文件流返回示例
    在这里插入图片描述

  • 正常数据返回示例
    在这里插入图片描述

二、解决问题

首先我我们先看下请求成功和失败的返回结果有无不同。
请求下载一个文件,请求成功时返回的是一个文件流,type是对应文件类型,例如:text/xml,正常导出文件;而请求失败的时候返回的是json ,type为application/json,不会处理错误信息,而是直接导出包含错误信息的文件。
但是无论成功还是失败,返回的结果都是blob格式的文件流。

因此可以通过返回的blob数据type类型进行区分,如果type是文件类型,导出文件,如果type是json则把blob数据转为string,处理错误信息。

在这里插入图片描述
在axios响应拦截器中,对二进制数据单独处理,如果type为application/json说明下载失败,那么弹出对应错误信息,然后返回Null,否则下载成功,正常返回res.data。

// 响应拦截器
service.interceptors.response.use(res => {...// 二进制数据处理if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {if (res.data.type === 'application/json') {const reader = new FileReader();reader.onload = () => {// TODO 错误处理this.$message.error(`Error: ${JSON.parse(reader.result).message}`);};reader.readAsText(res.data);return null;} else {return res.data;}}...
}

然后在通用下载函数中,首先进行判断,如果file存在,才开始下载操作。

export const DownloadFile = (file, fileName = 'file.xlsx') => {if (file) {const blob = new Blob([file]);// 获取heads中的filename文件名const downloadElement = document.createElement('a');// 创建下载的链接const href = window.URL.createObjectURL(blob);downloadElement.href = href;// 下载后文件名downloadElement.download = fileName;document.body.appendChild(downloadElement);// 点击下载downloadElement.click();// 下载完成移除元素document.body.removeChild(downloadElement);// 释放掉blob对象window.URL.revokeObjectURL(href);}
};

关键在于借助FileReader对象实现,FileReader.readAsText(data)开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。
读取操作完成时触发FileReader.onload(),在这里通过reader.result拿到读取的文件内容(即后端返回值),然后对其json序列化,即可拿到后端返回的message,然后进行相应的展示即可。
即下面这段代码:

if (res.data.type === 'application/json') {const reader = new FileReader();reader.readAsText(res.data);reader.onload = () => {// TODO 错误处理this.$message.error(`Error: ${JSON.parse(reader.result).message}`);};return null;
}

至此,问题解决。

总结

主要在于Blob格式返回错误怎么拿到的问题,通过type判断是否请求成功,然后借助FileReader对象读取blob格式文件内容,拿到需要的结果。

参考文章:https://blog.csdn.net/qq_27626333/article/details/103562749

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/585026.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NGINX加载多个COF文件配置

nginx.conf 总的配置 ############################################################# # # # nginx 反向代理设置,统一集管处,机器不够的话开集群。 # 包括: # SSL,限流,跨域,集群,黑名单,白名单,负载均衡 # #######################…

Matlab:BP神经网络算法,二叉决策树

1、BP神经网络算法 (1)步骤 1.准备训练数据和目标值 2.创建并配置BP神经网络模型 3.训练BP神经网络模型 4.用BP神经网络模型预测数据 例:某企业第一年度营业额为132468,第二年度为158948,第三年度为183737,预测第四年度的营…

【并发设计模式】聊聊线程本地存储模式如何实现的线程安全

前面两篇文章,通过两阶段终止的模式进行优雅关闭线程,利用数据不变性的方式保证数据安全,以及基于COW的模式,保证读数据的安全。本篇我们来简述下如果利用线程本地存储的方式保证线程安全。 首先一个大前提就是并发问题&#xff…

【六袆 - Framework】vue3入门;vue框架的特点矩阵列举;Vue.js 工作原理

vue框架的特点 Vue.js的特点展开叙述Vue.js的工作原理展开叙述 官方文档: https://cn.vuejs.org/guide/introduction.html Vue.js的特点 ┌────────────────────┬────────────────────────────────────…

yolov5 主要流程

1.介绍 本文包含了有关yolov5目标检测的基本流程,包括模型训练与模型部署,旨在帮助小伙伴们建立系统的认知💖💖 YOLO是 "You only look once "的首字母缩写,是一个开源软件工具,它具有实时检测…

Spring Boot 后端服务开发学习计划

一、专业技能提升 Spring Boot 深入学习与实践: 学习并理解Spring Boot的核心原理和特性,如自动配置、starter、Actuator等。实践开发复杂的后端API,包括RESTful API设计、异常处理、安全控制等。熟练使用Spring Boot与Mariadb的集成&#xf…

昇腾910平台安装驱动、固件、CANN toolkit、pytorch

本文使用的昇腾910平台操作系统是openEuler,之前没了解过,不过暂时感觉用起来和centOS差不多。系统架构是ARM,安装包基本都是带aarch64字样,注意和x86_64区别开,别下错了。 安装依赖 cmake 通过yum安装的cmake版本较…

【国产化适配】银河麒麟v10 sp2 aarch64 制作openssh 9.6p1 rpm——筑梦之路

银河麒麟v10制作openssh 9.1/9.2/9.3/9.4/9.5 p1 rpm —— 筑梦之路_annot install both openssh-9.2p1-1.ky10.aarch64 an-CSDN博客 准备源码 https://src.fedoraproject.org/repo/pkgs/openssh/x11-ssh-askpass-1.2.4.1.tar.gz/8f2e41f3f7eaa8543a2440454637f3c3/x11-ssh-a…

一体化、一站式!智能视频客服加码全媒体云呼叫中心能力

凭借对电话、短信、邮件、社交媒体、视频等数种沟通渠道强大的统一集成能力,全媒体云呼叫中心已跃升成为现代企业客户服务的核心工具,高效便捷地为企业提供客户服务。而随着消费者需求愈加多元化和个性化,传统的语音通话方式已无法满足部分消…

PHP序列化总结1--序列化和反序列化的基础知识

序列化和反序列化的作用 1.序列化:将对象转化成数组或者字符串的形式 2.反序列化:将数组或字符串的形式转化为对象 为什么要进行序列化 这种数据形式中间会有很多空格,不同人有不同的书写情况,可能还会出现换行的情况 为此为了…

【qt】解决qt里编辑qss后失效问题(qt编码问题)

1、先创建qss文本stylesheet.qss 以按钮为例 QPushButton {background-color:rgb(240,255,255);color: rgb(0, 0, 2);border-style: outset;border-color: beige;border-radius: 10px; }/* hover按钮悬浮,鼠标悬浮在按钮上的状态,按钮颜色 */QPushButto…

Qt/C++音视频开发62-电子放大/按下选择区域放大显示/任意选取区域放大

一、前言 电子放大这个功能思考了很久,也是一直拖到近期才静下心来完整这个小功能,这个功能的前提,主要得益于之前把滤镜打通了,玩出花样来了,只要传入对应的滤镜字符串,就可以实现各种各样的效果&#xf…

工业4G 物联网网关——机房动环监控系统应用方案介绍

机房动环监控系统是什么?机房动环监控系统的全称为机房动力环境监控系统,是一套安装在机房内的监控系统,可以对分散在机房各处的独立动力设备、环境和安防进行实时监测,统计和分析处理相关数据,第一时间侦测到故障发生…

微机原理12练习题答案

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。〕 十进制正数56的 8位二进制补码是(D)。A. 00011001 B. 10100110 C. 10011001 D. 00100110 若栈顶的物理地址为20100H,当执行完指令PUSH AX 后,栈顶的物理地址是(D)A. 2…

Java InputStream OutputStream

OutputStream 轉 InputStream Case 1 toByteArray ByteArrayOutputStream out new ByteArrayOutputStream(); new ByteArrayInputStream(out.toByteArray()) Case2 從Output字節讀取Input ByteArrayOutputStream out new ByteArrayOutputStream();byte[] bs new byte[…

Livox-Mid-360 固态激光雷达ROS格式数据分析

前言: Livox-Mid-360 官方采用livox_ros_driver2ROS功能包发布ROS格式的数据,livox_ros_driver2可以把Livox原始雷达数据转化成ROS格式并以话题的形式发布出去。 下面列举一些雷达的基本概念: 点云帧:雷达驱动每次向外发送的一…

ubuntu 编译内核报错

Ubuntu 编译 Linux 内核经常会遇到如下错误: 如果报错 canonical-certs.pem: 如下: make[1]: *** No rule to make target ‘debian/canonical-certs.pem’, needed by ‘certs/x509_certificate_list’. Stop. make: *** [Makefile:1868: …

UE4运用C++和框架开发坦克大战教程笔记(十二)(第37~39集)

UE4运用C和框架开发坦克大战教程笔记(十二)(第37~39集) 37. 延时事件系统38. 协程逻辑优化更新39. 普通按键绑定 37. 延时事件系统 由于梁迪老师是写 Unity 游戏出身的,所以即便 UE4 有自带的 TimeManager 这样的延时…

AIGC开发:调用openai的API接口实现简单机器人

简介 开始进行最简单的使用:通过API调用openai的模型能力 OpenAI的能力如下图: 文本生成模型 OpenAI 的文本生成模型(通常称为生成式预训练 Transformer 或大型语言模型)经过训练可以理解自然语言、代码和图像。这些模型提供文…

RabbitMQ消息存储JSON格式反序列化

如果发送消息消息体为实体类对象数据,交换机接收消息经由路由键发送给队列。需要实现数据反序列化操作。实现JSON格式的反序列化操作 Rabbitmq的反序列化接口 MessageConverter,它的实现类有 Jackson2JsonMessageConverter的反序列化实现类&#xff0c…