如何使用Spring Boot，Thymeleaf和Bootstrap上传多个文件

悠悠 2023-09-25 14:00 29阅读 0赞

在本教程中，我将向您展示如何使用Spring Boot，Thymeleaf和Bootstrap上传多个文件。我们还使用 Spring Web `MultipartFile`界面来处理 HTTP 多部分请求并显示上传文件的列表。

### **春季启动多文件上传与百里香叶概述** ###

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

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

– 这是多文件上传表格：

![f80232b4849440f0a0f83e81bdce03a2.png][]

– 如果其中一个文件超过特定的最大大小：

![cdcf05cee89748998c05fed8cffbe768.png][]

– 如果某些文件与上传的文件同名：

![ceb38359deb849fa9fde22a4acee0afc.png][]

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

![574508aa8e2d425a9209a6d921690c2e.png][]

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

![b1d6c11e7e0e4ee2b45093191d380692.png][]

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

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

### **科技** ###

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

### **项目结构** ###

![89ef3aad5f7a4400be34b92911fb4d66.png][]

让我简要解释一下。

– `FileInfo`包含上传文件的信息。  
–`FilesStorageService`帮助我们初始化存储，保存新文件，加载文件，获取文件信息列表，删除文件。  
– `FileController和FilesStorageService`用于处理多个文件上传/下载和模板请求。  
– `FileUploadExceptionAdvice`在控制器处理文件上传时处理异常。  
– `template`存储项目的 HTML 模板文件。  
– *application.properties* 包含 Servlet Multipart 的配置。  
– *uploads* 是用于存储文件的静态文件夹。  
– *pom.xml* 用于 Spring Boot 依赖项。

### **创建和设置Spring Boot MultiFile Upload项目** ###

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

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

<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>
    
    <dependency>
    	<groupId>org.webjars</groupId>
    	<artifactId>bootstrap</artifactId>
    	<version>4.6.2</version>
    </dependency>
    
    <dependency>
    	<groupId>org.webjars</groupId>
    	<artifactId>jquery</artifactId>
    	<version>3.6.1</version>
    </dependency>
    
    <dependency>
    	<groupId>org.webjars</groupId>
    	<artifactId>webjars-locator-core</artifactId>
    </dependency>

### **为文件存储创建服务** ###

首先，我们需要一个将在控制器中自动连接的接口。  
在*服务*文件夹中，创建类似于以下代码的`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<Path> 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");
    
      @Override
      public void init() {
        try {
          Files.createDirectories(root);
        } catch (IOException e) {
          throw new RuntimeException("Could not initialize folder for upload!");
        }
      }
    
      @Override
      public void save(MultipartFile file) {
        try {
          Files.copy(file.getInputStream(), this.root.resolve(file.getOriginalFilename()));
        } catch (Exception e) {
          if (e instanceof FileAlreadyExistsException) {
            throw new RuntimeException("Filename already exists.");
          }
    
          throw new RuntimeException(e.getMessage());
        }
      }
    
      @Override
      public 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());
        }
      }
    
      @Override
      public void deleteAll() {
        FileSystemUtils.deleteRecursively(root.toFile());
      }
    
      @Override
      public Stream<Path> 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` .

*controller/FileController.java*

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

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

### **设置模板** ###

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

![60e3a51f7f3c40088446dbd4b795580b.png][]

#### **页眉和页脚** ####

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

**fragments**/*footer.html*

<footer class="text-center">
      Copyright © BezKoder
    </footer>

以及包含导航栏的标题：

**fragments**/*header.html*

<header th:fragment="header">
      <nav class="navbar navbar-expand-md bg-dark navbar-dark mb-3">
        <a class="navbar-brand" th:href="@{/files}">
          BezKoder
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="topNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" th:href="@{/files/new}">Upload</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" th:href="@{/files}">Files</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

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

#### **多文件上传表单** ####

*upload\_form.html*

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
      <title>Thymeleaf Multiple File Upload example</title>
      <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
      <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
      <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    </head>
    
    <body>
      <div th:replace="fragments/header :: header"></div>
    
      -- Multiple file upload form --
    
      <div th:replace="fragments/footer :: footer"></div>
    </body>
    
    </html>

#### **文件列表** ####

*files.html*

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
      <title>Thymeleaf Multiple File Upload example</title>
    
      <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
      <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
      <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    </head>
    
    <body>
      <div th:replace="fragments/header :: header"></div>
    
      -- list of files display --
      
      <div th:replace="fragments/footer :: footer"></div>
    </body>
    
    </html>

### **实现多文件上传功能** ###

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

*  获取/文件/新：`newFile()` – 返回*upload\_form.html*模板
 *  发布/文件/上传：`ploadFiles()` – 上传多个文件`u`

`uploadFiles()`是主要方法我们使用`MultipartFile[] files`参数，Java 8 Stream API 来处理数组中的每个文件。

*FileController.java*

import com.bezkoder.spring.thymeleaf.file.upload.service.FilesStorageService;
    
    @Controller
    public class FileController {
    
      @Autowired
      FilesStorageService storageService;
    
      @GetMapping("/files/new")
      public String newFile(Model model) {
        return "upload_form";
      }
    
      @PostMapping("/files/upload")
      public String uploadFiles(Model model, @RequestParam("files") MultipartFile[] files) {
        List<String> messages = new ArrayList<>();
    
        Arrays.asList(files).stream().forEach(file -> {
          try {
            storageService.save(file);
            messages.add(file.getOriginalFilename() + " [Successful]");
          } catch (Exception e) {
            messages.add(file.getOriginalFilename() + " <Failed> - " + e.getMessage());
          }
        });
    
        model.addAttribute("messages", messages);
    
        return "upload_form";
      }
    }

*upload\_form.html*

<form
      id="uploadForm"
      method="post"
      th:action="@{/files/upload}"
      enctype="multipart/form-data">
      <input type="file" multiple name="files" />
      <button class="btn btn-sm btn-outline-success float-right" type="submit">
        Upload
      </button>
    </form>
    
    <div th:if="${messages != null}" class="alert alert-secondary alert-dismissible fade show message mt-3" role="alert">
      <div th:each="message : ${messages}">[[${message}]]</div>
      <button type="button" class="close btn-sm" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>

### **显示文件列表** ###

首先，我们需要创建具有`name和``url`字段的`FileInfo`模型：&.`name``url`

*model/FileInfo.java*

package com.bezkoder.spring.thymeleaf.file.upload.model;
    
    public class FileInfo {
      
      private String name;
      private String url;
    
      public FileInfo(String name, String url) {
        this.name = name;
        this.url = url;
      }
    
      public String getName() {
        return this.name;
      }
    
      public void setName(String name) {
        this.name = name;
      }
    
      public String getUrl() {
        return this.url;
      }
    
      public void setUrl(String url) {
        this.url = url;
      }
    }

在控制器中，我们将返回`FileInfo`对象列表作为模型属性。  
`@GetMapping``@PostMapping`注释用于将 HTTP GET & POST 请求映射到特定的处理程序方法：

*  获取/文件： `getListFiles()`– 返回*文件.html*模板
 *  获取 /files/\[文件名\]： `getFile()`– 下载`filename`文件

*FileController.java*

import com.bezkoder.spring.thymeleaf.file.upload.model.FileInfo;
    import com.bezkoder.spring.thymeleaf.file.upload.service.FilesStorageService;
    
    @Controller
    public class FileController {
    
      @Autowired
      FilesStorageService storageService;
    
      // ...
    
      @GetMapping("/")
      public String homepage() {
        return "redirect:/files";
      }
    
      @GetMapping("/files")
      public String getListFiles(Model model) {
        List<FileInfo> fileInfos = storageService.loadAll().map(path -> {
          String filename = path.getFileName().toString();
          String url = MvcUriComponentsBuilder
              .fromMethodName(FileController.class, "getFile", path.getFileName().toString()).build().toString();
    
          return new FileInfo(filename, url);
        }).collect(Collectors.toList());
    
        model.addAttribute("files", fileInfos);
    
        return "files";
      }
    
      @GetMapping("/files/{filename:.+}")
      public ResponseEntity<Resource> getFile(@PathVariable String filename) {
        Resource file = storageService.load(filename);
    
        return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"").body(file);
      }
    }

*files.html*

<div class="container-fluid" style="max-width: 600px; margin: 0 auto;">
      <h2 class="text-center">List of Files</h2>
    
      <div th:if="${files.size() > 0}">
        <table class="table table-hover">
          <thead class="thead-light">
            <tr>
              <th scope="col">File Name</th>
              <th scope="col">Link</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="file : ${files}">
              <td>[[${file.name}]]</td>
              <td><a th:href="@{${file.url}}">Download</a></td>
              <td>
                <a th:href="@{'/files/delete/' + ${file.name}}" th:fileName="${file.name}" id="btnDelete"
                  title="Delete this file" class="fa-regular fa-trash-can icon-dark btn-delete"></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    
      <div th:unless="${files.size() > 0}">
        <span>No files found!</span>
      </div>
    </div>

要删除文件，请访问以下教程：  
[弹簧启动删除文件示例与百里香叶][Link 1]

### **为 Servlet 配置多部分文件** ###

让我们定义可以在 *application.properties* 中上传的最大文件大小，如下所示：

spring.servlet.multipart.max-file-size=1MB
    spring.servlet.multipart.max-request-size=1MB

– `spring.servlet.multipart.max-file-size`：每个请求的最大文件大小。  
– `spring.servlet.multipart.max-request-size`：多部分/表单数据的最大请求大小。

### **处理文件上传异常** ###

这是我们处理请求超过最大上传大小的情况的地方。系统将抛出`MaxUploadSizeExceededException`，我们将使用`@ControllerAdvice和``@ExceptionHandler`注释来处理异常。

*exception/FileUploadExceptionAdvice.java*

package com.bezkoder.spring.thymeleaf.file.upload.exception;
    
    import org.springframework.web.multipart.MaxUploadSizeExceededException;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.bind.annotation.ExceptionHandler;
    
    @ControllerAdvice
    public class FileUploadExceptionAdvice {
    
      @ExceptionHandler(MaxUploadSizeExceededException.class)
      public String handleMaxSizeException(Model model, MaxUploadSizeExceededException e) {
        List<String> messages = new ArrayList<>();
        messages.add("One of selected files is too large!");
    
        model.addAttribute("messages", messages);
    
        return "upload_form";
      }
    }

### **初始化存储** ###

我们需要运行`FilesStorageService的``init()`方法（如有必要`deleteAll()`）。所以打开*ThymeleafMultipleFileUploadApplication.java*并实现`CommandLineRunner`的`run()`方法：

package com.bezkoder.spring.thymeleaf.file.upload;
    
    import javax.annotation.Resource;
    
    import org.springframework.boot.CommandLineRunner;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    import com.bezkoder.spring.thymeleaf.file.upload.service.FilesStorageService;
    
    @SpringBootApplication
    public class ThymeleafMultipleFileUploadApplication implements CommandLineRunner {
    
      @Resource
      FilesStorageService storageService;
    
      public static void main(String[] args) {
        SpringApplication.run(ThymeleafMultipleFileUploadApplication.class, args);
      }
    
      @Override
      public void run(String... arg) throws Exception {
    //    storageService.deleteAll();
        storageService.init();
      }
    }

### **使用百里香叶运行春季引导多文件上传示例** ###

使用以下命令运行 Spring 引导应用程序：`mvn spring-boot:run`。

### **源代码** ###

您可以在 [Github][] 上找到本教程的完整源代码。

用于删除文件：  
[弹簧启动删除文件示例与百里香叶][Link 1]

### **结论** ###

今天我们已经学习了如何使用多部分文件创建 Spring 启动 Thymeleaf 多文件上传应用程序，并使用静态文件夹获取文件信息。

或带前端的全栈： – Angular + Spring Boot：文件上传示例 – [React + Spring Boot：][React _ Spring Boot]  
[文件上传示例][Link 4]

您还可以了解如何上传Excel / CSV文件并将内容存储在MySQL数据库中，并带有以下帖子： – Spring Boot：将Excel文件数据上传/导入MySQL数据库 – [Spring Boot：将CSV文件数据上传/导入MySQL数据库][Spring Boot_CSV_MySQL]

如果要像这样将文件存储在数据库中：

![f8b963615f7577cc9d3898e763d890da.png][]

您可以在以下位置找到说明：  
[Spring 引导上传/下载文件到/从数据库示例][Spring]

快乐学习！再见。

### **延伸阅读** ###

– Spring Boot [上传多个文件 Rest API][Rest API]  
– Spring Boot Thymeleaf CRUD 示例 – [Spring Boot Thymeleaf 分页和排序示例][Spring Boot Thymeleaf]

异常处理：  
– Spring Boot [@ControllerAdvice & @ExceptionHandler][ControllerAdvice _ _ExceptionHandler] 示例 – [Spring Boot 中的@RestControllerAdvice示例][Spring Boot _RestControllerAdvice]

单元测试：  
– JPA 存储库的弹簧引导单元测试  
– [其余控制器的弹簧引导单元测试][Link 5]

部署：  
– [在 AWS 上部署 Spring Boot 应用程序 – Elastic Beanstalk][AWS _ Spring Boot _ _ Elastic Beanstalk]

关联：  
– 带有 JPA 的 Spring Boot 一对一示例，Hibernate – 使用 JPA 的 Spring Boot One To More 示例，Hibernate – [使用 JPA 的 Spring Boot Many to Many][JPA _ Spring Boot Many to Many] [示例，Hibernate][Hibernate]

[f80232b4849440f0a0f83e81bdce03a2.png]: https://img-blog.csdnimg.cn/f80232b4849440f0a0f83e81bdce03a2.png
[cdcf05cee89748998c05fed8cffbe768.png]: https://img-blog.csdnimg.cn/cdcf05cee89748998c05fed8cffbe768.png
[ceb38359deb849fa9fde22a4acee0afc.png]: https://img-blog.csdnimg.cn/ceb38359deb849fa9fde22a4acee0afc.png
[574508aa8e2d425a9209a6d921690c2e.png]: https://img-blog.csdnimg.cn/574508aa8e2d425a9209a6d921690c2e.png
[b1d6c11e7e0e4ee2b45093191d380692.png]: https://img-blog.csdnimg.cn/b1d6c11e7e0e4ee2b45093191d380692.png
[Link 1]: https://www.bezkoder.com/spring-boot-delete-file-thymeleaf/
[Link 2]: https://www.bezkoder.com/thymeleaf-pagination/
[89ef3aad5f7a4400be34b92911fb4d66.png]: https://img-blog.csdnimg.cn/89ef3aad5f7a4400be34b92911fb4d66.png
[Link 3]: http://start.spring.io/
[Spring Tool Suite]: https://spring.io/tools
[Intellij]: https://www.jetbrains.com/idea/download/
[60e3a51f7f3c40088446dbd4b795580b.png]: https://img-blog.csdnimg.cn/60e3a51f7f3c40088446dbd4b795580b.png
[Github]: https://github.com/bezkoder/thymeleaf-multiple-file-upload
[React _ Spring Boot]: https://www.bezkoder.com/react-file-upload-spring-boot/
[Link 4]: https://www.bezkoder.com/angular-14-spring-boot-file-upload/
[Spring Boot_CSV_MySQL]: https://www.bezkoder.com/spring-boot-upload-csv-file/
[f8b963615f7577cc9d3898e763d890da.png]: https://img-blog.csdnimg.cn/img_convert/f8b963615f7577cc9d3898e763d890da.png
[Spring]: https://www.bezkoder.com/spring-boot-upload-file-database/
[Rest API]: https://www.bezkoder.com/spring-boot-upload-multiple-files/
[Spring Boot Thymeleaf]: https://www.bezkoder.com/thymeleaf-pagination-and-sorting-example/
[ControllerAdvice _ _ExceptionHandler]: https://www.bezkoder.com/spring-boot-controlleradvice-exceptionhandler/
[Spring Boot _RestControllerAdvice]: https://www.bezkoder.com/spring-boot-restcontrolleradvice/
[Link 5]: https://www.bezkoder.com/spring-boot-webmvctest/
[AWS _ Spring Boot _ _ Elastic Beanstalk]: https://www.bezkoder.com/deploy-spring-boot-aws-eb/
[JPA _ Spring Boot Many to Many]: https://www.bezkoder.com/jpa-many-to-many/
[Hibernate]: https://www.bezkoder.com/jpa-one-to-one/