在本教程中，我将向您展示如何在 Spring Boot 项目中使用 Thymeleaf 和 Bootstrap 实现文件上传。我们还使用 Spring Web MultipartFile界面来处理 HTTP 多部分请求。

Thymeleaf 文件上传概述

我们的 Spring Boot + Thymeleaf 文件上传示例将具有以下功能：

• 将文件上传到服务器中的静态文件夹
• 使用链接从服务器下载文件
• 获取文件信息列表（文件名和URL）

– 这是文件上传表格：

– 如果文件超过特定的最大大小：

– 这是存储所有上传文件的静态文件夹：

– 您可以查看带有下载链接的上传文件列表：

在本教程中，我不解释删除文件的方法。如果你想知道这一点，只需访问：
弹簧启动删除文件示例与百里香叶

或者使用以下教程添加分页：
春季启动百里香叶分页示例

科技

• Java 8
• Spring Boot 2.7 (with Spring Web MVC, Thymeleaf)
• Maven 3.6.1
• Bootstrap 4
• jQuery 3.6.1

项目结构

让我简要解释一下。

– FileInfo包含上传文件的信息。

–FilesStorageService帮助我们初始化存储，保存新文件，加载文件，获取文件信息列表，删除文件。

– FileController、FilesStorageService用于处理文件上传/下载和模板请求。

– FileUploadExceptionAdvice在控制器处理文件上传时处理异常。

– template存储项目的 HTML 模板文件。

– application.properties包含 Servlet Multipart 的配置。
– uploads上传是用于存储文件的静态文件夹。
– pom.xml 用于 Spring Boot 依赖项。

创建和设置 Spring Boot 项目

使用 Spring Web 工具或开发工具（Spring Tool Suite、Eclipse、Intellij）创建 Spring Boot 项目。

然后打开pom.xml并为Spring Web，Thymeleaf，Bootstrap，Jquery添加依赖项：

org.springframework.bootspring-boot-starter-web
org.springframework.bootspring-boot-starter-thymeleaf
org.webjarsbootstrap4.6.2
org.webjarsjquery3.6.1
org.webjarswebjars-locator-core

为文件存储创建服务

首先，我们需要一个将在控制器中自动连接的接口。
在服务文件夹中，创建类似于以下代码的接口：FilesStorageService

service/FilesStorageService.java

package com.bezkoder.spring.thymeleaf.file.upload.service;import java.nio.file.Path;
import java.util.stream.Stream;import org.springframework.core.io.Resource;
import org.springframework.web.multipart.MultipartFile;public interface FilesStorageService {public void init();public void save(MultipartFile file);public Resource load(String filename);public void deleteAll();public Stream loadAll();
}

现在我们创建接口的实现。

service/FilesStorageServiceImpl.java

package com.bezkoder.spring.thymeleaf.file.upload.service;import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.FileAlreadyExistsException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.stream.Stream;import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.stereotype.Service;
import org.springframework.util.FileSystemUtils;
import org.springframework.web.multipart.MultipartFile;@Service
public class FilesStorageServiceImpl implements FilesStorageService {private final Path root = Paths.get("./uploads");@Overridepublic void init() {try {Files.createDirectories(root);} catch (IOException e) {throw new RuntimeException("Could not initialize folder for upload!");}}@Overridepublic void save(MultipartFile file) {try {Files.copy(file.getInputStream(), this.root.resolve(file.getOriginalFilename()));} catch (Exception e) {if (e instanceof FileAlreadyExistsException) {throw new RuntimeException("A file of that name already exists.");}throw new RuntimeException(e.getMessage());}}@Overridepublic Resource load(String filename) {try {Path file = root.resolve(filename);Resource resource = new UrlResource(file.toUri());if (resource.exists() || resource.isReadable()) {return resource;} else {throw new RuntimeException("Could not read the file!");}} catch (MalformedURLException e) {throw new RuntimeException("Error: " + e.getMessage());}}@Overridepublic void deleteAll() {FileSystemUtils.deleteRecursively(root.toFile());}@Overridepublic Stream loadAll() {try {return Files.walk(this.root, 1).filter(path -> !path.equals(this.root)).map(this.root::relativize);} catch (IOException e) {throw new RuntimeException("Could not load the files!");}}
}

创建用于文件上传的控制器

在控制器包中，我们创建 .FileController

控制器/文件控制器.java

package com.bezkoder.spring.thymeleaf.file.upload.controller;
// ...
import com.bezkoder.spring.thymeleaf.file.upload.service.FilesStorageService;@Controller
public class FileController {@AutowiredFilesStorageService storageService;@GetMapping("/")public String homepage() {return "redirect:/files";}@GetMapping("/files/new")public String newFile(Model model) {return "upload_form";}@PostMapping("/files/upload")public String uploadFile(Model model, @RequestParam("file") MultipartFile file) {...return "upload_form";}@GetMapping("/files")public String getListFiles(Model model) {...return "files";}@GetMapping("/files/{filename:.+}")public ResponseEntity getFile(@PathVariable String filename) {...// return File}
}

– @Controller注释用于定义控制器。
– @GetMapping、@PostMapping注释用于将 HTTP GET & POST 请求映射到特定的处理程序方法并返回适当的模板文件。
– ​​​​​​​​​​​​​​@Autowired我们使用将FilesStorageService bean 的实现注入到局部变量中。

设置模板

在 src/main/resources 文件夹中，按以下结构创建文件夹和文件：

页眉和页脚

我们将使用百里香叶碎片（）来重用一些常见的部分，例如页眉和页脚。
让我们为它们编写 HTML 代码。th:fragment

fragments/footer.html

以及包含导航栏的标题：

fragments/header.html

现在我们需要创建HTML文件，然后导入Thymeleaf片段，Bootstrap，jQuery和Font Awesome。

文件上传表格

upload_form.html

-- file upload form --

文件列表

files.html

-- list of files display --

实现文件上传功能

我们使用@GetMapping和@PostMapping注释用于将HTTP GET和POST请求映射到特定的处理程序方法：​​​​​​​

• 获取/文件/新： newFile()– 返回upload_form.html模板
• 发布/文件/上传： uploadFile()– 上传文件

FileController.java

import com.bezkoder.spring.thymeleaf.file.upload.service.FilesStorageService;@Controller
public class FileController {@AutowiredFilesStorageService storageService;@GetMapping("/files/new")public String newFile(Model model) {return "upload_form";}@PostMapping("/files/upload")public String uploadFile(Model model, @RequestParam("file") MultipartFile file) {String message = "";try {storageService.save(file);message = "Uploaded the file successfully: " + file.getOriginalFilename();model.addAttribute("message", message);} catch (Exception e) {message = "Could not upload the file: " + file.getOriginalFilename() + ". Error: " + e.getMessage();model.addAttribute("message", message);}return "upload_form";}
}

upload_form.html

Thymeleaf File Upload example
Upload[[${message}]]×