关于使用axios上传文件和下载文件流的问题,很多都是通用的,代码块

上传文件

重点是采用multipart/form-data类型,利用formdata传数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const paramupdata = new FormData(); //创建form对象
paramupdata.append('file', '文件内容')

axios({
method: 'post',
url: 'xxxx.api',
data: paramupdata,
headers:{'Content-Type':'multipart/form-data'}
})
.then((res) => {
console.log(res
})
.catch((err) => {
console.log(err)
})

下载文件流

重点是接收数据类型,和返回的数据类型,然后利用a标签下载下来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// api.js

// excel导出
export const userExportForExcel = (postdata) => {
//
return new Promise((resolve, reject) =>{
request({
method: 'post',
url:'xxxx',
responseType:'blob',
data: qs.stringify(postdata)
})
.then((res) => {
resolve(res)
// that.allorgs =
}).catch((err) => {
reject(err)
})
})
}

业务代码

1
2
3
4
5
6
7
8
9
10
11

let res = await userExportForExcel(postdata)
let blob = new Blob([res.data],{type: res.headers['content-type']});
let downloadElement = document.createElement('a');
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = '项目类型.xlsx'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象