2021-09-01

文件上传过程中响应的处理

响应头设置Content-Disposition属性

后端再处理好文件流时需要写入响应response的输入流中：
// 读取excel模板
ExcelWorkbook workbook = loadExcelTemplate(filePath);
OutputStream output = response.getOutputStream();
…模板文件处理
workbook.write(output);
output.flush();
workbook.close();
此时flush是是否立即输出流指定的html，是响应已经或者准备提交了，如果在这段代码之后，还有其他代码试图改写header，比如调用response.setHeader，就改不了
response.setHeader(“Content-Disposition”, "attachment; filename= “某.xls”);
前端获取的响应中无此属性
那么前端react在处理文件流时：
onClick={() => {
fetch(downloadFiles, { //downloadFiles 接口请求地址
method: ‘get’,
credentials: ‘include’,
headers: new Headers({
‘Content-Type’: ‘application/json’,
‘X-Auth-Token’: User.getToken(),//设置header 获取token
})
}).then((response) => {
return response.blob().then(function (blob) {
var a = window.document.createElement(‘a’);
var downUrl = window.URL.createObjectURL(blob);
var filename = (0, _contentDisposition.parse)(response.headers.get(‘Content-Disposition’)).parameters.filename;
a.href = downUrl;
a.download = decodeURI(filename);
a.click();
window.URL.revokeObjectURL(downUrl);
return {
code: 0,
messageKey: ‘Start downloading’
};
});

}).catch((error) => {
console.log(‘文件下载失败’, error);
});
}}

获取不到属性Content-Disposition ，就下载不了，所以后端接口代码对于response的处理要flush提交的，把setHeader操作的代码写到这个上面去