前言
在企业级项目开发过程中,上传文件是最常用到的功能。SpringBoot集成了SpringMVC,当然上传文件的方式跟SpringMVC没有什么不同。
本章目标
使用SpringBoot项目完成单个、多个文件的上传处理,并将上传的文件保存到指定目录下。这里我们会使用layui,如果有不懂layui的同行可以去layui官网
官网地址:https://www.layui.com/
项目构建
1.项目搭建的主要步骤我在这里就不多重复了,我们直接勾选Web依赖,然后生成项目,结构如下
form表单文件上传
单文件上传
1.由于SpringBoot的项目结构不同于SSM,很多企业也会用jsp页面,对我而言我不太喜欢,一般我们的jsp页面都是放在/src/main/webapp/WEB_INF/jsp,现在我们在这个目录先配置html,如果有需要配置jsp页面的同行把后缀名改一下就可以了,现在我们去application.properties中配置访问的页面以及目录,目录结构如下
2.application.properties配置如下
spring.mvc.view.prefix=/WEB_INF/jsp/
spring.mvc.view.suffix=.html
3.现在去控制器配置一下访问的页面,新建控制器IndexController,代码如下,然后启动运行
IndexController
package com.demo03.demo_03.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class IndexController { @RequestMapping("/") public String index(){ return "index"; } }
4.现在我们访问一下页面,index.html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单图片上传</title> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input type="file" name="file"> <input type="submit" value="图片上传"> </form> </body> </html>
5.现在我们去控制器编写代码,更新后的IndexController如下
package com.demo03.demo_03.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.util.UUID; @Controller public class IndexController { @RequestMapping("/") public String index(){ return "index"; } //单图片上传 @RequestMapping("/upload") @ResponseBody public String upload(HttpServletRequest request, MultipartFile file){ try{ //上传目录地址 String uploadDir=request.getSession().getServletContext().getRealPath("/")+"upload/"; //判断目录是否存在,如果不存在则构建目录 File dir=new File(uploadDir); if(!dir.mkdir()){ dir.mkdir(); } //文件名后缀 String suffix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); //上传文件名 String fileName= UUID.randomUUID()+suffix; //服务端保存的文件对象 File saveFile=new File(uploadDir+fileName); //将上传的文件写入到服务器端文件内 file.transferTo(saveFile); }catch (Exception e){ e.printStackTrace(); return "上传失败"; } return "上传成功"; } }
6.现在我们去index.html中上传图片,效果如下,可以看到我们图片上传成功了
index.html更新后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单图片上传</title> </head> <body> <form action="/upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"> <input type="submit" value="图片上传"> </form> </body> </html>
多文件上传
1.由于我们要用到多图片上传,所以我们先去控制器更新一下代码,更新后的IndexController代码如下
package com.demo03.demo_03.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.UUID; @Controller public class IndexController { @RequestMapping("/") public String index(){ return "index"; } //单图片上传 @RequestMapping("/upload") @ResponseBody public String upload(HttpServletRequest request, MultipartFile file){ try{ //上传目录地址 String uploadDir=request.getSession().getServletContext().getRealPath("/")+"upload/"; //判断目录是否存在,如果不存在则构建目录 File dir=new File(uploadDir); if(!dir.mkdir()){ dir.mkdir(); } //文件名后缀 String suffix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); //上传文件名 String fileName= UUID.randomUUID()+suffix; //服务端保存的文件对象 File saveFile=new File(uploadDir+fileName); //将上传的文件写入到服务器端文件内 file.transferTo(saveFile); }catch (Exception e){ e.printStackTrace(); return "上传失败"; } return "上传成功"; } //提取上传图片的公共方法 /* * uploadDir 上传目录 * file上传对象 * */ public void executeUpload(String uploadDir,MultipartFile file) throws IOException { //文件名后缀 String suffix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); //上传文件名 String fileName=UUID.randomUUID()+suffix; //服务端保存文件对象 File saveFile=new File(uploadDir+fileName); //将上传的文件写入到服务器端文件内 file.transferTo(saveFile); } //多文件上传 @RequestMapping("/uploadArray") @ResponseBody public String uploadArray(HttpServletRequest request,MultipartFile[] file){ try { //上传目录地址 String uploadDir=request.getSession().getServletContext().getRealPath("/")+"upload/"; //如果目录不存在,则构建目录 File dir=new File(uploadDir); if(!dir.exists()){ dir.mkdir(); } //遍历文件数组执行上传 for(int i=0;i<file.length;i++){ if(file[i]!=null){ //调用上传的方法 executeUpload(uploadDir,file[i]); } } }catch (Exception e){ e.printStackTrace(); return "上传失败"; } return "上传成功"; } }
2.更新index.html页面,发现上传成功,更新后的index.html如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单图片上传</title> </head> <body> <h2>单文件上传</h2> <form action="/upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"> <input type="submit" value="图片上传"> </form> <h1>多个文件上传</h1> <form action="/uploadArray" enctype="multipart/form-data" method="post"> <input type="file" name="file"> <input type="file" name="file"> <input type="file" name="file"> <input type="submit" value="图片上传"> </form> </body> </html>