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">
- 上传文件: <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>
别的在文件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
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";
- }
- }
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个不同类型的文件，同时文件名也根据设置举行了相应的修改，读者还可以打开每个文件查看具体的文件内容。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
