1. 概述
在这篇简短教程中,我们将探讨如何使用Spring Boot和Thymeleaf在Java Web应用中上传图片。
2. 依赖项
我们只需要两个依赖:Spring Boot Web和Thymeleaf:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3. Spring Boot 控制器
我们的第一步是创建一个Spring Boot Web控制器来处理请求:
@Controller public class UploadController {
public static String UPLOAD_DIRECTORY = System.getProperty("user.dir") + "/uploads";
@GetMapping("/uploadimage") public String displayUploadForm() {
return "imageupload/index";
}
@PostMapping("/upload") public String uploadImage(Model model, @RequestParam("image") MultipartFile file) throws IOException {
StringBuilder fileNames = new StringBuilder();
Path fileNameAndPath = Paths.get(UPLOAD_DIRECTORY, file.getOriginalFilename());
fileNames.append(file.getOriginalFilename());
Files.write(fileNameAndPath, file.getBytes());
model.addAttribute("msg", "Uploaded images: " + fileNames.toString());
return "imageupload/index";
}
}
我们定义了两个方法来处理HTTP GET请求。displayUploadForm()
方法处理GET请求,并返回Thymeleaf模板的名称,以便显示给用户,让用户导入图片。
uploadImage()
方法处理图片上传。它接受一个用于上传图片的multipart/form-data
POST请求,并将图片保存到本地文件系统。Spring Boot提供的MultipartFile
接口是一种特殊的数据结构,用于表示multipart请求中的上传文件。
最后,我们创建了一个上传文件夹来存储所有上传的图片。我们还添加了一条消息,包含上传图片的名称,以便用户提交表单后显示。
4. Thymeleaf 模板
第二步是创建一个Thymeleaf模板,我们将其命名为index.html
,位于src/main/resources/templates
路径下。这个模板会显示一个HTML表单,允许用户选择并上传图片。此外,我们使用accept="image/*"
属性,只允许用户导入图片,而不是任何文件。
让我们看看index.html
文件的结构:
<body>
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2>Upload Image Example</h2>
<p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
<form method="post" th:action="@{/upload}" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="image" accept="image/*" class="form-control-file">
</div>
<button type="submit" class="btn btn-primary">Upload image</button>
</form>
<span th:if="${msg != null}" th:text="${msg}"></span>
</div>
</div>
</div>
</section>
</body>
5. 自定义文件大小限制
如果我们尝试上传大文件,将会抛出MaxUploadSizeExceededException
异常。然而,我们可以通过在application.properties
文件中定义spring.servlet.multipart.max-file-size
和spring.servlet.multipart.max-request-size
属性来调整文件上传限制:
spring.servlet.multipart.max-file-size = 5MB
spring.servlet.multipart.max-request-size = 5MB
6. 总结
在这篇文章中,我们介绍了如何基于Spring Boot和Thymeleaf在Java Web应用中上传图片。
如往常一样,本文的完整源代码可以在GitHub上找到。