简介
在现代Web应用中,我们通常会遇到一种交互是文件的上传与下载,而更常用的技术是将文件转唯二进制流来进行处理。此时就需要处理为Blob类型的数据,本文将详细介绍如何在Vue项目中使用Axios处理Blob类型的请求,并进行成功与错误的封装处理
什么是blob类型
在计算机科学和数据库领域,Blob(Binary Large Object)是一个可以存储二进制文件的容器,常用于数据库中以存储大容量的二进制数据,如图片、音频文件等。。由于图片、音频的尺寸较大,需要使用特殊的方式来处理,如上传、下载或存储到数据库中。
为什么需要Blob类型?
在某些情况下,我们需要从服务器下载文件,例如导出Excel表格、下载PDF文档等。此时,服务器通常会返回二进制数据,而不是常规的JSON数据。为了正确处理这些二进制数据,我们需要将请求的响应类型设置为Blob。
使用Axios处理Blob类型的请求
import axios from 'axios';
const downloadFile = async (url, params) => {
try {
const response = await axios({
method: 'get',
url: url,
params: params,
responseType: 'blob', // 设置响应类型为blob
});
// 创建一个Blob对象
const blob = new Blob([response.data], {
type: response.headers['content-type'] });
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement