前端接收后端传回来的文件流相关操作

先来看后端部分：

/*业务层
 */

@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);
    //读取文件流并将其添加到response的输出流中，同时应当设置响应的Header字段
    try(InputStream inputStream = new FileInputStream(file);
       OutputStream outputStream = response.getOutputStream();//获取response的输出流对象
       ){
          
   
        //设置ContentType字段告知浏览器返回内容类型
        response.setContentType("application/octet-stream");
        //设置Header字段
        response.setHeader("Content-Disposition","attachment;filename="+
                           URLEncoder.encode(finalFile.getFIleName(),"utf-8"));
        //下面这行代码必须加，否则前端获取不到Content-Disposition字段，即无法获取文件名
        response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
        //将读取的文件流复制到response的输出流中
        IOUtils.copy(inputStream,outputStream);
        //刷新输出流
        outputStream.flush();
        //关闭输出流
        outputStream.close();
    }catch(Exception e){
          
   
        e.printStackTrace();
    }
}

/*控制器
 */

@AutoWired
FinalFileService finalFileService;

@CrossOrigin//如果是前后端分离项目，则应当处理跨域问题
@GetMapping(value = "/download")//应当设置为Get请求，Post请求只能在 postman测试中能下载，在前端下载不了(坑)
public void download(Integer id,HttpServletRequest request,HttpServletResponse response){
          
   
    finalFileService.downloadFile(id,request,response);
}

再来看前端部分：

//前端利用的是axios来请求，而后将响应的输出流封装到Blob对象中
methods:{
          
   
	handleDownload(file_id){
          
   
		this.$axios
			.get(/download?id=+file_id,{
          
   responseType:blob})//responseType应当添加
			.then(res=>{
          
   
            	//获取文件名
            	const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
				const blob = new Blob([res.data]);
            	//创建一个a标签并设置href属性，之后模拟人为点击下载文件
				let link = document.createElement(a);
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;//设置下载文件名
                link.click();//模拟点击
            	//释放资源并删除创建的a标签
             	URL.revokeObjectURL(link.href);
  				document.body.removeChild(link);
			})
	}
}

寄语：你所热爱的，就是你的生活~

（点个免费的赞再走吧，谢谢您嘞😘😘😘）