返回流文件前端处理方法(全)

接口返回二进制文件流前端处理方法

前后端分离项目中,为保证数据安全性,文件数据通常使用接口调用方式获取,后端返回二进制文件流后前端该如何处理。

流数据转链接
获取到的流文件数据(注意:接口调用时需设置responseType:blob)使用Blob构造函数（将二进制数据存储为一个单一个体的集合）进行转换，它接受两个参数。第一个参数是数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容；第二个参数是可选的，是一个配置对象。然后通过URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL.最后返回一个以blob://xxx的浏览器临时路径地址

	//(例)将pdf流文件数据转为临时链接地址
	let blob = new Blob([res.data],{type:'application/pdf'}
	const url = URL.createObjectURL(blob)
1
2
3

对于不同类型文件转换通过改变type的值实现

文件类型分类

常见文件场景有图片、视频、音频、word、excel、pdf这些类别

非流文件处理
正常情况下会返回流文件前端进行转换,在错误情况下返回报错(json)信息时,这时我们不需要下载文件而是给出错误信息.
接口返回的报错信息是json格式,由于请求设置了responseType:‘blob’,所以会转化为Blob类型.
这时需要使用FileReader读取文件,具体逻辑代码如下

//downAllTask为封装的接口方法,params为请求参数
downAllTask(params).then((res) => {
	//实例读取文件对象
    const r = new FileReader();
    r.onload = function () {
    try {
    	// this.result为FileReader获取blob数据,如果返回报错信息,则是正确的json数据,JSON.parse会正常转换
    	//如果返回文件流,则JSON.parse时会报错,走catch代码块(进行正常的文件下载)   	
        const resData = JSON.parse(this.result); 
        //resData是后端返回的json数据
        if (resData.errorcode===500) {
           proxy.$message.warning(resData.msg)
           return
        }
     }catch (error) {
         let blob = new Blob([res], { type: "application/zip" });
         let url = window.URL.createObjectURL(blob);
         const link = document.createElement("a"); 
         link.href = url;
         link.download = "下载图片"; 
         link.click();
         URL.revokeObjectURL(url);
      }
    }
    r.readAsText(res)
}).catch((e)=>{
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28