vue axios实现下载文件及responseType:blob注意事项

需要使用axios和js-file-download组件

npm install js-file-download --save
npm install axios --save
import fileDownload from 'fileDownload'; // 引入fileDownload
import axios from 'axios'; // 引入axios axios({method: 'get',url: 'xxxxxxx',responseType: 'blob'
}).then(res => {if(res.status == 200){// res.headers['content-disposition'].substring(20)表示从响应头中获取文件名fileDownload(res.data,res.headers['content-disposition'].substring(20));}else { // 下载文件失败,解析json格式信息let that = this;var fileReader = new FileReader();fileReader.readAsText(res.data); // 按字节读取文件内容,结果为文件的二进制串fileReader.onload = ()=>{that.$notify.error(fileReader.result);}} 
})

注意事项:responseType:blob表示服务器返回的响应类型是二进制流,一般用于文件、视频下载等场景。正常情况下后端返回二进制数据,当后端服务器出错时,往往会以json形式返回错误信息,例如{"code":500,"msg":"未知异常"}。因为设置了blob类型,axios会强制把数据转为blob,导致json格式的响应没办法正常解析,需要使用FileReader对象来处理,FileReader是一种异步读取文件机制。FileReader提供了如下方法,大家根据需要自行选择。

  • readAsArrayBuffer(file):按字节读取文件内容,结果用ArrayBuffer对象表示

  • readAsBinaryString(file):按字节读取文件内容,结果为文件的二进制串

  • readAsDataURL(file):读取文件内容,结果用data:url的字符串形式表示

  • readAsText(file,encoding):按字符读取文件内容,结果用字符串形式表示

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

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

相关文章

算法面试-深度学习面试题整理(2024.8.29开始,每天下午持续更新....)

一、无监督相关(聚类、异常检测) 1、常见的距离度量方法有哪些?写一下距离计算公式。 1)连续数据的距离计算: 闵可夫斯基距离家族: 当p 1时,为曼哈顿距离;p 2时,为欧…

新建Spring Boot项目

使用IDEA 来创建: 文件-新建-项目 填写项目元数据 选择依赖项 此处可以先选 web-spring web 关于这些依赖项,更多可参考: IDEA创建Spring boot项目时各依赖的说明(Developer Tools篇)[1] 项目结构介绍 展开项目,此时…

栈和队列(详解)

一、栈 1.1、栈的基本概念 1.1.1、栈的定义 栈(Stack):是只允许在一端进行插入或删除的线性表。首先栈是一种线性表,但限定这种线性表只能在某一端进行插入和删除操作。 栈顶(Top):线性表允许…

Tensorflow调用训练好的yolov5模型进行推理

文章目录 1、安装TensorFlow-GPU版本1.2、验证是否安装正常 2、将训练好的pt文件转换成onnx文件2.2、什么是Onnx模型和Tensorflow模型2.1、将onnx文件转换成pb文件 1、安装TensorFlow-GPU版本 1、创建虚拟环境python3.8 conda create -n TF2.4 python3.82、进入虚拟环境 conda…

使用WebSocket实现聊天功能

提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、数据库设计二、实现代码1.SessionWrap2.websocket3.insertMessage4.清除未读 前言 使用WebSocket实现一对一的聊天功能与未读消息功能 一、数据库设计 会话…

Oracle 本地客户端连接远程 Oracle 服务端并使用 c# 连接测试

这里写自定义目录标题 前言Oracle 客户端安装先决条件下载 Oracle 客户端Oracle 客户端环境变量配置 PL/SQLPL/SQL 下载PL/SQL 配置 配置远程连接tnsnames.ora 文件配置 使用 PL/SQL 连接远程数据库使用 C# 远程访问 Oracle 数据库结语 前言 最近有一个需要使用本地的 Oracle …

即时通讯开发中的性能优化技巧

即时通讯开发在如今的数字化社会中扮演着重要角色,然而,随着用户对即时通讯应用的需求不断增长,开发者们面临着使其应用保持高性能和可靠性的挑战。本文将探讨即时通讯开发中关键的性能优化技巧,帮助开发者们提升应用的用户体验和…

C语言:指针类型的意义

1.指针的类型决定了解引用时访问几个字节 2.指针的类型决定了指针1、-1跳过几个字节 一、指针的类型决定指针解引用时访问几个字节 例如 int 型指针解引用时访问4个字节 char 型指针解引用时访问1个字节 详解代码如下: int b 0x11223344(十六进制&…

CSS 滚动容器与固定 Tabbar 自适应的几种方式

问题 容器高度使用 px 定高时,随着页面高度发生变化,组件展示的数量不能最大化的铺满,导致出现底部留白。容器高度使用 vw 定高时,随着页面宽度发生变化,组件展示的数量不能最大化的铺满,导致出现底部留白…

【操作系统】聊聊文件传输的零拷贝、PageCache、异步IO机制

在目前主流的系统中,其实大多数都是数据密集型系统,所以设计数据密集型应用一书非常经典,推荐一读。而大多数遇到的问题都是存储问题。CPU、内存 因为本身的读写速度比较快,所以磁盘就成为了一个性能瓶颈。 针对磁盘优化的技术层…

Harbor 私有仓库迁移

文章目录 一.私有仓库迁移的介绍1.为何要对Harbor 私有仓库的迁移2.Harbor 私有仓库的迁移特点3. Harbor 私有仓库的迁移注意要点 二.私有仓库迁移配置1.源Harbor配置(192.168.198.11)(1)接着以下操作查看容器状况及是否可以登录 …

C语言之数组题

目录 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 5.扫雷 6.概念辨析tips 我又来了,今天是数组题,本人还在补军训真的热!🆗 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 …

Windows10 系统安装教程

多虚不如少实。 一、 下载安装包 下载前景:网上下载的 windows10 系统一般都有捆绑软件,用户体验不爽,所以建议到 正规渠道下载 windows10 系统的不同版本。另外网上也有一些 windows10 系统的镜像文件 可以直接一键安装,…

科技政策 | 四川省科学技术厅关于发布2024年第一批省级科技计划项目申报指南的通知

原创 | 文 BFT机器人 近日,四川省科学技术厅发布了2024年第一批省级科技计划项目申报指南;其中包括自然科学基金项目、重点研发计划、科技成果转移转化引导计划、科技创新基地(平台)和人才计划。 01 自然科学基金项目 实施周期 …

YOLOv5引入FasterNet主干网络,目标检测速度提升明显

目录 一、背景介绍1.1 目标检测算法简介1.2 YOLOv5简介及发展历程 二、主干网络选择的重要性2.1 主干网络在目标检测中的作用2.2 YOLOv5使用的默认主干网络 三、FasterNet简介与原理解析3.1 FasterNet概述3.2 FasterNet的网络结构3.2.1 基础网络模块3.2.2 快速特征融合模块3.2.…

打造互动体验:品牌 DTC 如何转变其私域战略

越来越多的品牌公司选择采用DTC 模式与消费者进行互动,而非仅仅销售产品。通过与消费者建立紧密联系,DTC模式不仅可以提供更具成本效益的规模扩张方式,还能够控制品牌体验、获取宝贵的第一方数据并提升盈利能力。然而DTC模式的经济模型比许多…

【C++】—— 异常处理

前言: 本期,我将给大家讲解的是有关 异常处理 的相关知识! 目录 (一)C语言传统的处理错误的方式 (二)C异常概念 (三)异常的使用 1、异常的抛出和捕获 1️⃣ 异常的…

layui 多选限制选择3个

可以使用 layui 的表单组件进行多选&#xff0c;然后通过 JavaScript 代码限制用户最多只能选择 3 个选项。具体的实现步骤如下&#xff1a; 在 layui 的表单组件中&#xff0c;使用多选框进行多选。 <div class"layui-form-item"><label class"layu…

【LeetCode-中等题】98. 验证二叉搜索树

文章目录 题目方法一&#xff1a;BFS 层序遍历方法二&#xff1a; 题目 方法一&#xff1a;BFS 层序遍历 利用层序遍历 拿到每一个节点 并且给每一个结点配备一个最大值和最小值的队列 只要节点在最大值和最小值之间就满足二叉搜索树的条件 public boolean isValidBST(TreeNo…

Docker的运用

文章目录 一、 Docker介绍二、Docker常用命令三、Docker 部署微服务项目四、Docker 使用场景五、Docker模拟场景5.1 模拟部署Nacos5.2 模拟部署Mongodb5.3 模拟部署RabbitMQ 一、 Docker介绍 Docker是一种开源软件平台&#xff0c;用于在不同的操作系统&#xff08;如Windows、…