IT评测·应用市场-qidao123.com技术社区

标题: 前端将file文件传给后台，后台将文件传给前台（包含上传下载） [打印本页]

---

作者: tsx81428    时间: 2024-10-3 12:33
标题: 前端将file文件传给后台，后台将文件传给前台（包含上传下载）
前端将file文件传给后台，后台将文件传给前台（包含上传下载）

在开发过程中，经常会遇见对文件的处理。
例如：在上传、下载文件时，需要在前端选完文件传到后台传到服务器；大概文件从后台，经过特定需求的处理在返回给前台。
中间处理过程各种各样，但有两个过程是固定的

• 前端传给后台
  
• 后台返回给前端
  

经常用到的上传就是对应第一步，下载对应第二部。会在文章最后总结。
下面是示例代码

• 前台传给后台
  界面接纳el-upload组件，在选择文件时，将文件传给后台
  
  1. <el-upload class="upload-demo" ref="upload" action="#" :on-change="changeFile" :file-list="fileList" :auto-upload="false" :limit="1">
  2.   <el-button slot="trigger" size="small" type="primary">选取文档</el-button>
  3. </el-upload>

  复制代码
  选择完文件会走changeFile(file)方法，其中默认入参为选中的文件，如下图，真正的文件类型是File类型的raw变量
  
  
  
  不能直接将File类型变量传输，要把File文件转成FormData类型，通过axios发送请求
         用的组件不同可能返回的类型、变量名不一样，但最后要获取到File文件类型，通过FormData()举行转换传向后台。
      需要配置的参数：
  
  
  
  • method：post
    
  • url：自己的接口地址
    
  • data：请求前转换类型的参数
    
  • headers：credentials: ‘same-origin’
    
  • responseType：‘blob’ //用于接收后台返回的文件所需类型
    
  1. //el-upload文件上传事件
  2. changeFile(file) {
  3.   let formData = new FormData()
  4.   formData.append('file', file.raw)// 传文件
  5.   axios({
  6.      method: 'post',
  7.      url: url, //此处为往后台发送请求的地址
  8.      data: formData,
  9.      headers: {
  10.        // "Content-Type": "multipart/form-data"
  11.        credentials: 'same-origin'
  12.      },
  13.      timeout: 20000,
  14.       //设置返回接受类型为blob
  15.      responseType: 'blob'
  16.    }).then(res => {
  17.       //返回值转成Blob类型
  18.      let blob = new Blob([res.data])
  19.    });
  20. },

  复制代码
  后端用MultipartFile类接收，而且获取HttpServletRequest和HttpServletResponse参数，看下controller层的代码
  
  1. @PostMapping("transferFile")
  2. public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
  3.     deptService.transferFile(file, request, response);
  4. }

  复制代码
  可以看到乐成获取到在前台选择的文件
  
  
  
  那后台怎么返回给前台呢
  
  
• 后台将文件传给前台
  接着上面，看下service实现类的代码
  
  1. @Override
  2. public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {
  3.     InputStream inputStream = file.getInputStream();
  4.     String fileName = file.getOriginalFilename();
  5.     /**
  6.     *        此处可以对文件输入流按照需求进行【自定义操作】
  7.     *        操作完后也要返回一个字节数组
  8.     */
  9.     byte[] bytes = new byte[1024];
  10.     inputStream.read(bytes);
  11.     try {
  12.         response.setCharacterEncoding("UTF-8");
  13.         //设置ContentType字段告知浏览器返回内容类型
  14.         response.setContentType("application/octet-stream");
  15.         //设置Header字段
  16.         //下面这行代码必须加，否则前端获取不到Content-Disposition字段，即无法获取文件名
  17.         response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
  18.         ServletOutputStream out = response.getOutputStream();
  19.         out.write(bytes);
  20.         out.flush();
  21.         out.close();
  22.     } catch (Exception e) {
  23.     } finally {
  24.         inputStream.close();
  25.     }
  26. }

  复制代码
  看上面代码，通过file.getInputStream()方法获取到文件的输入流，在调用read()方法，将其读到字节数组中，response.setContentType("application/octet-stream")设置返回值类型。通过response.getOutputStream()方法，获取返回的输出流，调用write将刚才读随处理完的字节数组写入，最后将流关闭。
         中间部门可以对流举行自定义利用，利用完成后返回字节数组，写到response的输出流中即可
      例如该项目中会将doc文件的流转成docx格式的流，感兴趣的可以看之后的文章。
      接口执行完成，前端将返回值转成Blob类型，且发送请求时已经设置了responseType为'blob'。如下图两处关键点。
  
  
  
  

到此文件前后台之间的传输过程就全部结束。
此处介绍的是个完整的过程，对于上传和下载着实是两步拆开单独对应。

• 上传
  完整的对应第一步骤：选择文件->通报给后台->后台转成流调用第三方接口上传到文件服务器
  
• 下载
  通常从后台调用第三方接口获取文件，一般会以流的形式返回，此时为输入流，然后拿到response的输出流，写入。
  获取远程文件输入流->写入响应参数的输出流
  
  1. ServletOutputStream out = response.getOutputStream();
  2. out.write(bytes);

  复制代码
        com.google.api.client.util下有个工具类可以直接实现流之间的复制，省去多样步骤
      IOUtils.copy(inputStream, response.getOutputStream());
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4