Vue+axios下载二进制文件踩坑记录

需求

1. 调用文件下载接口从文件服务器上下载文件，返回二进制流。

2. 将接口返回的二进制流转换为File对象。

3. 将转换后的File对象以FormData提交给文件解析接口。

实现

1. 下载接口

axios({
                        method: "get",
                        url: fileUrl,
                        headers: {
                            "content-type": "application/json; charset=utf-8",
                        },
                        responseType: "blob",       //设置响应类型为blob，否则二进制流直接转换会出错
                    })

axios是直接import的axios，不是二次封装后的对象，保证axios纯净可控。

2. 转换File对象

  //将返回的二进制数据转换为Blob对象，必须指定文件类型
                        let blob = new Blob([response.data], {
                            type: "application/zip"
                        });
                        //Blob对象转换为File对象，必须指定文件类型
                        let files = new File([blob], data.fileName, {
                            type: 'application/zip'
                        })

3. 创建FormData对象

  //以formdata形式提交数据至接口
                        let formData = new FormData()
                        formData.append('file', files)
                        formData.append("fileType", "shp");
                        //调用接口上传文件
                        this.getJsonFromShp(`${GIS_CUSTOM_SERVICE}/datamanagement/feature/fileToJson`, formData)

完整代码

import axios from 'axios';

//拼接文件下载路径
                const fileUrl = `${httpConfig.fileDownloadUrl}?fileName=${data.fileName}&token=${this.getCookie('assess_token')}`
                console.log(fileUrl)
                //使用原生的axios请求文件为二进制流 
                axios({
                        method: "get",
                        url: fileUrl,
                        headers: {
                            "content-type": "application/json; charset=utf-8",
                        },
                        responseType: "blob",       //设置响应类型为blob，否则二进制流直接转换会出错
                    }).then((response) => {
                        //将返回的二进制数据转换为Blob对象，必须指定文件类型
                        let blob = new Blob([response.data], {
                            type: "application/zip"
                        });
                        //Blob对象转换为File对象，必须指定文件类型
                        let files = new File([blob], data.fileName, {
                            type: 'application/zip'
                        })
                        //以formdata形式提交数据至接口
                        let formData = new FormData()
                        formData.append('file', files)
                        formData.append("fileType", "shp");
                        //调用接口上传文件
                        this.getJsonFromShp(`${GIS_CUSTOM_SERVICE}/datamanagement/feature/fileToJson`, formData)
                    })
                    .catch((error) => {
                        console.log(error.data);
                    });