Spring Boot文件上传

5.3.1文件上传

开发Web应用时，文件上传是很常见的一个需求浏览器通过表单形式将文件以流的形式传递给服务器，服务器再对上传的数据解析处理。下面我们通过一个案例讲解如何使用SpringBoot实现文件上传，具体步骤如下。

1.编写文件上传的表单页面

在chapter05项目根路径下的templates 模板引擎文件夹下创建一个用来上传文件的upload.html模板页面，内容如下列代码所示。

复制代码

<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>动态添加文件上传列表</title>
   <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
   <script th:src="@{/login/js/jquery.min.js}"></script>
</head>
<body>
<div th:if="${uploadStatus}" style="color: red" th:text="${uploadStatus}">
上传成功</div>
   <form th:action="@{/uploadFile}"method="post" enctype="multipart/form-data">
       上传文件:&nbsp;&nbsp;<input type="button"value="添加文件"onclick="add()"/>
       <div id-"file" style="margin-top：10px;"th:value="文件上传区域"> </div>
       <input id="submit" type="submit" value="上传"
              style="display: none;margin-top: 10px;"/>
   </form>
<script type="text/javascript">
   //动态添加上传按钮
   function add(){
       var innerdiv = "<div>";
       innerdiv += "<input type='file' name='fileUpload' required='required'>"+
                   "<input type='button' value-'删除' onclick='remove(this)'>";
       innerdiv +="</div>";
       $("#file").append(innerdiv);
       //打开上传按钮
       $("#submit").css("display"，"block");
   }
   //删除当前行<div>
   function remove (obj) {
       $(obj).parent().remove();
       if($("#file div").length ==0){
          $("#submit").css("display","none");
       }
   }
</script>
</body>
</html>

在上述代码中，第13_{18行代码的<form>标签用于创建上传文件的表单。第19}37行是一段JavaScript脚本代码，用来处理用户动态添加或者移除上传输入框。

另外在文件5-11中第8行代码还引入了静态资源目录下的login/js中的jquery.min.js文件，因此，这里需要在项目resources/static/login 目录下创建一个 js 文件夹，并引入jquery.min.js文件。

2.在全局配置文件中添加文件上传的相关配置

在全局配置文件 application.properties 中添加文件上传的相关设置，内容如下列代码所示。

复制代码

# thymeleaf 页面缓存设置（默认为true)，开发中为方便调试应设置为false，上线稳定后应保持默认true
spring.thymeleaf.cache=false
# 配置国际化文件基础名
spring.messages.basename=i18n.login
# 单个上传文件大小限制（默认为1MB）
spring.servlet.multipart.max-file-size=10MB
# 总上传文件大小限制（默认为10MB）
spring.servlet.multipart.max-request-size=50MB

在上述代码中，在项目全局配置文application.properties已有配置的基础上，对文件上传过程中的上传大小进行了设置。其中，spring.servlet.multipart.max-file-size用来设置单个上传文件的大小限制，默认值为1MB，上述文件设置为10MB；spring.servlet.multipart.maxrequest-size 用来设置所有上传文件的大小限制，默认值为10MB，这里设置为50MB。如果上传文件的大小超出限制，会提示"FileUploadBaseyFileSizeLimitExceededException:The field fleUpload exceeds its maximum permitted size of 1048576 bytes"异常信息，因此开发者需要结合实际需求合理设置文件大小。

3.进行文件上传处理，实现文件上传功能

在之前创建的com.itheima.controller 包下创建一个管理文件上传下载的控制类FileController，用于实现文件上传功能，内容如下列代码所示。

复制代码

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.UUID;
/**
*文件管理控制类
*/
@Controller
public class FileController
   // 向文件上传页面跳转
   @GetMapping("/toupload")
   public String toupload(){
      return "upload";
   }
   //文件上传管理
   @PostMapping("/uploadFile")
   public String uploadFile (MultipartFile[] fileupload, Model model){
   //默认文件上传成功，并返回状态信息
   model.addattribute("uploadStatus"，"上传成功！");
   for (MultipartFile file : fileUpload) {
      // 获取文件名以及后级名
      String fileName = file.getOriginalFilename();
      // 重新生成文件名（根据具体情况生成对应文件名）
      fileName = UUID.randomUUID()+""+fileName;
      // 指定上传文件本地存储目录，不存在则需要提前创建
      String dirPath = "F:/file/";
      File filePath = new File(dirPath);
      if(!filePath.exists()){
         filePath.mkdirs();
      }
      try {
         file.transferTo(new File(dirPath+fileName))
      } catch (Exception e) {
         e.printStackTrace();
        //上传失败，返回失败信息
        model.addAttribute("uploadstatus",，"上传失败："+e.getMessage());
      }
   }
   //携带上传状态信息回调到文件上传贞面
   return "upload";
}
}

文件5-13中，toUpload()方法用于处理路径为"/toUpload"的GET请求，并返回上传页面的路径。uploadFile()方法用于处理路径为"/uploadFile"的POST请求，如果文件上传成功,则会将上传的文件重命名并存储在"F：/ile/"目录。如果上传失败，则会提示上传失败的相关信息。需要注意的是，uploadFile()方法的参数fileUpload 的名称必须与上传页面中的name 值一致。

4.效果测试

启动项目，项目启动成功后，在浏览器上访问"http:/localhost-8080/oUpload"，效果如图5-18所示。

单击图5-13所示窗口中的【添加文件】按钮，能够动态添加多个文件，效果如图5-14所示。

在图5-14所示的文件上传页面中，共添加了3个上传的文件，每个上传文件后方对应一个【删除】按钮，用于移除上传的文件。单击文件上传页面的【上传】按钮，如果存在未选择的文件，会提示"请选择一个文件"，否则选择好的上传文件会进行上传处理，效果如图5-15所示。

从图5-15可以看出，文件上传成功后页面会提示"上传成功"。为了验证文件上传效果，打开上传文件的存储目录"F:/ile/"，效果如图5-16所示。

从图5-16可以看出，在定制的上传文件存储目录"F:/ile/"下，出现了选择上传的3个不同类型的文件，同时文件名也根据设置进行了相应的修改，读者还可以打开每个文件查看具体的文件内容。