SpringBoot + Axios

1、文件上传

  1. <form th:action="url" method="post" enctype="multipart/form-data">
  2.     <input type="file" name="fileInformation"/>
  3.     <input type="submit" value="上传文件"/>
  4. </form>
  1.  /**
  2.   * 上传文件
  3.   * @return
  4.   */
  5. @PostMapping("upload")
  6. public void uploadFile(MultipartFile fileInformation,HttpSession session) throws IOException {
  7.     // 获取用户的 id
  8.     User user = (User) session.getAttribute("user");
  9.     // 获取文件的原始名称
  10.     String oldFileName = fileInformation.getOriginalFilename();
  11.     // 获取文件后缀
  12.     String file_ext = "." + FilenameUtils.getExtension(fileInformation.getOriginalFilename());
  13.     // 生成新的文件名称
  14.     String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+oldFileName;
  15.     // 文件大小
  16.     long size = fileInformation.getSize();
  17.     // 文件类型
  18.     String type = fileInformation.getContentType();
  20.     // 保存文件的路径
  21.     String upload_path = ResourceUtils.getURL("classpath:").getPath() + "static/save";
  22.     // 创建日期文件夹
  23.     String dateFormat = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
  24.     String dateDirPath = upload_path + "/" + dateFormat;
  25.     File dateDir = new File(dateDirPath);
  26.     if(!dateDir.exists()){
  27.         dateDir.mkdirs();
  28.     }
  29.     // 处理文件上传
  30.     fileInformation.transferTo(new File(dateDir,newFileName));
  32.     System.out.println("success");
  33. }

2、获取数据

  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  2. // 得到文件中的数据
  3. axios
  4.     .get("http://localhost:8081/files/axios/getDataFromFile", {
  5.     params: {
  6.         name: "filename",
  7.         ext : "ext"  // 文件后缀
  8.     },
  9. })
  10.     .then((res) => {
  11.     console.log("数据是:", res.data);
  12. })
  13.     .catch((e) => {
  14.     console.log("获取数据失败");
  15. });
  16. }
  18. // 或者
  19. axios({
  20.     method: "post",
  21.     url: "http://localhost:8081/files/axios/getDataFromFile",
  22.     // changeOrigin: true,
  23.     // responseType: "json", 
  24.      data: {   //  Controller中用 @RequestBody 接收 data
  25.        name: "filename",
  26.        ext : "ext"  // 文件后缀 
  27.      },
  28. })
  29.     .then(function (res) {
  30.     console.log("数据是:" + res.data);
  31. })
  1. @GetMapping("getDataFromFile")
  2. public void getDataFromFile(@RequestParam String name, @RequestParam String ext,HttpServletResponse response) throws IOException {
  3.     // 获取文件路径
  4.     String filePath = ResourceUtils.getURL("classpath:").getPath() + "static/save/" + name + "." + ext;
  5.     // 获取文件输入流
  6.     FileInputStream is = new FileInputStream(new File(filePath));
  7.     //  attachment --> 文件下载   inline --> 在线打开
  8.     // response.setHeader("content-disposition","attachment;fileName"+ URLEncoder.encode("application","UTF-8"));
  9.     // 获得相应输出流
  10.     ServletOutputStream os = response.getOutputStream();
  11.     // 文件拷贝
  12.     IOUtils.copy(is,os);
  13.     IOUtils.closeQuietly(is);
  14.     IOUtils.closeQuietly(os);
  15.     System.out.println("success");
  16. }
  1. <!-- 需要如下依赖-->
  2. <dependency>
  3.     <groupId>commons-fileupload</groupId>
  4.     <artifactId>commons-fileupload</artifactId>
  5.     <version>1.4</version>
  6. </dependency>