前端将file文件传给后台，后台将文件传给前台（包含上传下载） |
您所在的位置：网站首页 › 上传附件怎么上传文件夹图片格式 › 前端将file文件传给后台，后台将文件传给前台（包含上传下载） |
前端将file文件传给后台，后台将文件传给前台（包含上传下载）
| 前台传给后台 界面采用el-upload组件，在选择文件时，将文件传给后台 选取文档选择完文件会走changeFile(file)方法，其中默认入参为选中的文件，如下图，真正的文件类型是File类型的raw变量 不能直接将File类型变量传输，要把File文件转成FormData类型，通过axios发送请求 用的组件不同可能返回的类型、变量名不一样，但最后要获取到File文件类型，通过FormData()进行转换传向后台。 需要配置的参数： method：posturl：自己的接口地址data：请求前转换类型的参数headers：credentials: ‘same-origin’responseType：‘blob’ //用于接收后台返回的文件所需类型 //el-upload文件上传事件 changeFile(file) { let formData = new FormData() formData.append('file', file.raw)// 传文件 axios({ method: 'post', url: url, //此处为往后台发送请求的地址 data: formData, headers: { // "Content-Type": "multipart/form-data" credentials: 'same-origin' }, timeout: 20000, //设置返回接受类型为blob responseType: 'blob' }).then(res => { //返回值转成Blob类型 let blob = new Blob([res.data]) }); },后端用MultipartFile类接收，并且获取HttpServletRequest和HttpServletResponse参数，看下controller层的代码 @PostMapping("transferFile") public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception { deptService.transferFile(file, request, response); }可以看到成功获取到在前台选择的文件 那后台怎么返回给前台呢 后台将文件传给前台 接着上面，看下service实现类的代码 @Override public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException { InputStream inputStream = file.getInputStream(); String fileName = file.getOriginalFilename(); /** * 此处可以对文件输入流按照需求进行【自定义操作】 * 操作完后也要返回一个字节数组 */ byte[] bytes = new byte[1024]; inputStream.read(bytes); try { response.setCharacterEncoding("UTF-8"); //设置ContentType字段告知浏览器返回内容类型 response.setContentType("application/octet-stream"); //设置Header字段 //下面这行代码必须加，否则前端获取不到Content-Disposition字段，即无法获取文件名 response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8")); ServletOutputStream out = response.getOutputStream(); out.write(bytes); out.flush(); out.close(); } catch (Exception e) { } finally { inputStream.close(); } }看上面代码，通过file.getInputStream()方法获取到文件的输入流，在调用read()方法，将其读到字节数组中，response.setContentType("application/octet-stream")设置返回值类型。通过response.getOutputStream()方法，获取返回的输出流，调用write将刚才读到处理完的字节数组写入，最后将流关闭。 中间部分可以对流进行自定义操作，操作完成后返回字节数组，写到response的输出流中即可 例如该项目中会将doc文件的流转成docx格式的流，感兴趣的可以看之后的文章。 接口执行完成，前端将返回值转成Blob类型，且发送请求时已经设置了responseType为'blob'。如下图两处关键点。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |