一、单个文件上传
1、创建工程,引入依赖
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>
2、编写controller
** * @Author ChoiBin * @Date 2019-07-29 14:01 * @Version 1.0 */ @RestController public class FileUploadController { //创建一个时间格式,方便图片分类 SimpleDateFormat simpleDateFormat = new SimpleDateFormat("/yyyy/MM/dd/"); @PostMapping("/upload") public String upload(MultipartFile file, HttpServletRequest request){ String format = simpleDateFormat.format(new Date()); String realPath = request.getServletContext().getRealPath("/img") + format; File folder = new File(realPath); if(!folder.exists()){ folder.mkdirs(); } String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf(".")); try { file.transferTo(new File(folder,newName)); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName; return url; }catch (IOException e){ e.printStackTrace(); } return "error"; } }
3、编写HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="提交"> </form> </body> </html>
4、测试结果
5、如何修改上传的文件大小
application.properties配置文件添加:
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=10MB
二、用Ajax上传文件
1、修改HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="result"></div> <input type="file" name="file"> <input type="button" value="上传" onclick="uploadFile()"> <script> function uploadFile() { var file = $("#file")[0].files[0]; var formData = new FormData(); formData.append("file",file); $.ajax({ type:"post", url:"/upload", processData:false, contenType:false, data:formData, success:function (msg) { $("result").html(msg); } }) } </script> </body> </html>
后端代码保持不变,只需更改前端代码
三、多个文件上传
1、编写HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/uploads" method="post" enctype="multipart/form-data"> <input type="file" name="files" multiple> <input type="submit" value="提交"> </form> </body> </html>
2、编写controller
@PostMapping("/uploads") public String uploads(MultipartFile[] files, HttpServletRequest request){ String format = simpleDateFormat.format(new Date()); String realPath = request.getServletContext().getRealPath("/img") + format; File folder = new File(realPath); if(!folder.exists()){ folder.mkdirs(); } for (MultipartFile file : files) { String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf(".")); try { file.transferTo(new File(folder,newName)); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName; System.out.println(url); }catch (IOException e){ e.printStackTrace(); } } return "success"; }
如果需要实现多个文件上传,那么controller就用一个MultipartFile数组来接收前台传进来的文件;如果是在多个<input>标签上的图片文件,那么controller上就写多个MultipartFile,与<input>标签上的name对应即可。