前端接收后端传回来的文件流相关操作
先来看后端部分:
@AutoWired
FinalFileRepository finalFileRepository;
@Override
public void downloadFile(Integer id,HttpServletRequest request,HttpServletResponse response){
FinalFile finalFile = finalFileRepository.getById(id);
String file_path = finalFile.getLocation();
File file = new File(file_path);
try(InputStream inputStream = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();
){
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition","attachment;filename="+
URLEncoder.encode(finalFile.getFIleName(),"utf-8"));
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
IOUtils.copy(inputStream,outputStream);
outputStream.flush();
outputStream.close();
}catch(Exception e){
e.printStackTrace();
}
}
@AutoWired
FinalFileService finalFileService;
@CrossOrigin
@GetMapping(value = "/download")
public void download(Integer id,HttpServletRequest request,HttpServletResponse response){
finalFileService.downloadFile(id,request,response);
}
再来看前端部分:
methods:{
handleDownload(file_id){
this.$axios
.get('/download?id='+file_id,{responseType:'blob'})
.then(res=>{
const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
const blob = new Blob([res.data]);
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
})
}
}
寄语:你所热爱的,就是你的生活~
(点个免费的赞再走吧,谢谢您嘞😘😘😘)