Spring Boot + thymeleaf如何實(shí)現(xiàn)文件上傳下載功能

小編給大家分享一下Spring Boot + thymeleaf如何實(shí)現(xiàn)文件上傳下載功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近同事問我有沒有有關(guān)于技術(shù)的電子書，我打開電腦上的小書庫，但是郵件發(fā)給他太大了，公司又禁止用文件夾共享，于是花半天時(shí)間寫了個(gè)小的文件上傳程序，部署在自己的Linux機(jī)器上。

提供功能： 1 .文件上傳 2.文件列表展示以及下載

原有的上傳那塊很丑，寫了點(diǎn)js代碼優(yōu)化了下，最后界面顯示如下圖：

先給出成果，下面就一步步演示怎么實(shí)現(xiàn)。

1.新建項(xiàng)目

首先當(dāng)然是新建一個(gè)spring-boot工程，你可以選擇在網(wǎng)站初始化一個(gè)項(xiàng)目或者使用IDE的Spring Initialier功能，都可以新建一個(gè)項(xiàng)目。這里我從IDEA新建項(xiàng)目：

下一步，然后輸入group和artifact，繼續(xù)點(diǎn)擊next：

這時(shí)候出現(xiàn)這個(gè)模塊選擇界面，點(diǎn)擊web選項(xiàng)，勾上Web，證明這是一個(gè)webapp,再點(diǎn)擊Template Engines選擇前端的模板引擎，我們選擇Thymleaf，spring-boot官方也推薦使用這個(gè)模板來替代jsp。

最后一步，然后等待項(xiàng)目初始化成功。

2.pom設(shè)置

首先檢查項(xiàng)目需要添加哪些依賴，直接貼出我的pom文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.shuqing28</groupId>
 <artifactId>upload</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>
 <name>upload</name>
 <description>Demo project for Spring Boot</description>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>1.5.9.RELEASE</version>
 <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <properties>
 <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 <java.version>1.8</java.version>
 </properties>
 <dependencies>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter</artifactId>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-configuration-processor</artifactId>
  <optional>true</optional>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-test</artifactId>
  <scope>test</scope>
 </dependency>
 <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
 <dependency>
  <groupId>org.webjars</groupId>
  <artifactId>bootstrap</artifactId>
  <version>3.3.5</version>
 </dependency>
 <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
 <dependency>
  <groupId>org.webjars.bower</groupId>
  <artifactId>jquery</artifactId>
  <version>2.2.4</version>
 </dependency>
 </dependencies>
 <build>
 <plugins>
  <plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  </plugin>
 </plugins>
 </build>
</project>

可以查看到 spring-boot-starter-thymeleaf 包含了webapp，最后兩個(gè)webjars整合了bootstrap和jquery，其它的等代碼里用到再說。

最后一個(gè)Spring boot maven plugin是系統(tǒng)創(chuàng)建時(shí)就添加的，它有以下好處：

1 . 它能夠打包c(diǎn)lasspath下的所有jar，構(gòu)建成一個(gè)可執(zhí)行的“über-jar”，方便用戶轉(zhuǎn)移服務(wù)

2 . 自動(dòng)搜索 public static void main() 方法并且標(biāo)記為可執(zhí)行類

3 . 根據(jù)spring-boot版本，提供內(nèi)建的依賴解釋。

3. 上傳文件控制器

如果你只是使用SpringMVC上傳文件，是需要配置一個(gè) MultipartResolver 的bean的，或者在 web.xml 里配置一個(gè) <multipart-config> ,不過借助于spring-boot的自動(dòng)配置，你什么都不必做。直接寫控制器類，我們?cè)?src/main/java 下新建controller的package，并且新建FileUploadController：

package com.shuqing28.upload.controller;
import com.shuqing28.uploadfiles.pojo.Linker;
import com.shuqing28.uploadfiles.exceptions.StorageFileNotFoundException;
import com.shuqing28.uploadfiles.service.StorageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.method.annotation.MvcUriComponentsBuilder;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.io.IOException;
import java.util.List;
import java.util.stream.Collectors;
@Controller
public class FileUploadController {
  private final StorageService storageService;
  @Autowired
  public FileUploadController(StorageService storageService) {
    this.storageService = storageService;
  }
  @GetMapping("/")
  public String listUploadedFiles(Model model)throws IOException {
    List<Linker> linkers = storageService.loadAll().map(
        path -> new Linker(MvcUriComponentsBuilder.fromMethodName(FileUploadController.class,
            "serveFile", path.getFileName().toString()).build().toString(),
            path.getFileName().toString())
    ).collect(Collectors.toList());
    model.addAttribute("linkers", linkers);
    return "uploadForm";
  }
  @GetMapping("/files/{filename:.+}")
  @ResponseBody
  public ResponseEntity<Resource> serveFile(@PathVariable String filename) {
    Resource file = storageService.loadAsResource(filename);
    return ResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION,
        "attachment; filename=\"" + file.getFilename() + "\"").body(file);
  }
  @PostMapping("/")
  public String handleFileUpload(@RequestParam("file") MultipartFile file,
                  RedirectAttributes redirectAttributes) {
    storageService.store(file);
    redirectAttributes.addFlashAttribute("message",
        "You successfully uploaded " + file.getOriginalFilename() + "!");
    return "redirect:/";
  }
  @ExceptionHandler(StorageFileNotFoundException.class)
  public ResponseEntity<?> handleStorageFileNotFound(StorageFileNotFoundException exc) {
    return ResponseEntity.notFound().build();
  }
}

類定義處添加了 @Controller 注解，證明這是一個(gè)Controller，每個(gè)方法前添加了 @GetMapping 和 @PostMapping 分別相應(yīng)Get和Post請(qǐng)求。

首先是 @GetMapping("/") ,方法 listUploadedFiles ，顧名思義，顯示文件列表，這里我們借助于storageService遍歷文件夾下的所有文件，并且用map方法提合成了鏈接和文件名列表，返回了一個(gè)Linker對(duì)象的數(shù)組,Linker對(duì)象是一個(gè)簡單pojo，只包含下面兩部分:

private String fileUrl;
private String fileName;

這個(gè)方法包含了對(duì)Java8中Stream的使用，如果有不理解的可以看看這篇文章 Java8 特性詳解（二） Stream API .

接下來是 @GetMapping("/files/{filename:.+}") ，方法是 serveFile ,該方法提供文件下載功能，還是借助于storageservice，后面會(huì)貼出storageservice的代碼。最后使用ResponseEntity，把文件作為body返回給請(qǐng)求方。

@PostMapping("/") 的 handleFileUpload 使用Post請(qǐng)求來上傳文件，參數(shù) @RequestParam("file") 提取網(wǎng)頁請(qǐng)求里的文件對(duì)象，還是使用storageService來保存對(duì)象，最后使用重定向來刷新網(wǎng)頁，并且給出成功上傳的message。

4. 文件處理

上面Controller調(diào)用的很多方法由StorageService提供，我們定義一個(gè)接口，包含以下方法：

package com.shuqing28.uploadfiles.service;
import org.springframework.core.io.Resource;
import org.springframework.web.multipart.MultipartFile;
import java.nio.file.Path;
import java.util.stream.Stream;
public interface StorageService {
  void init();
  void store(MultipartFile file);
  Stream<Path> loadAll();
  Path load(String filename);
  Resource loadAsResource(String filename);
  void deleteAll();
}

因?yàn)槲疫@里只是借助于本地文件系統(tǒng)處理文件的長傳下載，所以有了以下實(shí)現(xiàn)類：

package com.shuqing28.uploadfiles.service;
import com.shuqing28.uploadfiles.exceptions.StorageException;
import com.shuqing28.uploadfiles.exceptions.StorageFileNotFoundException;
import com.shuqing28.uploadfiles.config.StorageProperties;
import org.springframework.beans.factory.annotation.Autowired;
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.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.net.MalformedURLException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;
import java.util.stream.Stream;
@Service
public class FileSystemStorageService implements StorageService {
  private final Path rootLocation;
  @Autowired
  public FileSystemStorageService(StorageProperties properties) {
    this.rootLocation = Paths.get(properties.getLocation());
  }
  @Override
  public void init() {
    try {
      Files.createDirectories(rootLocation);
    }
    catch (IOException e) {
      throw new StorageException("Could not initialize storage", e);
    }
  }
  @Override
  public void store(MultipartFile file) {
    String filename = StringUtils.cleanPath(file.getOriginalFilename());
    try {
      if (file.isEmpty()) {
        throw new StorageException("Failed to store empty file" + filename);
      }
      if (filename.contains("..")) {
        // This is a security check
        throw new StorageException(
            "Cannot store file with relative path outside current directory "
                + filename);
      }
      Files.copy(file.getInputStream(), this.rootLocation.resolve(filename), StandardCopyOption.REPLACE_EXISTING);
    } catch (IOException e) {
      throw new StorageException("Failed to store file" + filename, e);
    }
  }
  @Override
  public Stream<Path> loadAll() {
    try {
      return Files.walk(this.rootLocation, 1)
          .filter(path -> !path.equals(this.rootLocation))
          .map(path->this.rootLocation.relativize(path));
    }
    catch (IOException e) {
      throw new StorageException("Failed to read stored files", e);
    }
  }
  @Override
  public Path load(String filename) {
    return rootLocation.resolve(filename);
  }
  @Override
  public Resource loadAsResource(String filename) {
    try {
      Path file = load(filename);
      Resource resource = new UrlResource(file.toUri());
      if (resource.exists() || resource.isReadable()) {
        return resource;
      }
      else {
        throw new StorageFileNotFoundException(
            "Could not read file: " + filename);
      }
    }
    catch (MalformedURLException e) {
      throw new StorageFileNotFoundException("Could not read file: " + filename, e);
    }
  }
  @Override
  public void deleteAll() {
    FileSystemUtils.deleteRecursively(rootLocation.toFile());
  }
}

這個(gè)類也基本運(yùn)用了Java的NIO，使用Path對(duì)象定義了location用于文件的默認(rèn)保存路徑。

先看 store 方法，store接受一個(gè)MultipartFile對(duì)象作為參數(shù)，想比于傳統(tǒng)JSP中只是傳二進(jìn)制字節(jié)數(shù)組，MultipartFile提供了很多方便調(diào)用的方法讓我們可以獲取到上傳文件的各項(xiàng)信息：

public interface MultipartFile extends InputStreamSource {
 String getName();
 String getOriginalFilename();
 String getContentType();
 boolean isEmpty();
 long getSize();
 byte[] getBytes() throws IOException;
 InputStream getInputStream() throws IOException;
 void transferTo(File dest) throws IOException, IllegalStateException;
}

代碼里使用了Files的copy方法把文件流拷到location對(duì)應(yīng)的Path里，當(dāng)然我們也可以使用transferTo方法保存文件， file.transferTo(this.rootLocation.resolve(filename).toFile());

loadAll方法加載該路徑下的所有文件Path信息， loadAsResource 則是加載文件為一個(gè)Resource對(duì)象，再看Controller的代碼，最后是接受一個(gè)Resource對(duì)象作為body返回給請(qǐng)求方。

5. 前端模板

最后定義了前端模板，這里依舊先看代碼：

<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Share Files</title>
</head>
<body>
<div class="col-md-8 col-md-offset-2" th:if="${message}">
  <h3 th:text="${message}"/>
</div>
<div class="col-md-8 col-md-offset-2">
  <form method="POST" action="/" enctype="multipart/form-data">
    <!-- COMPONENT START -->
    <input type="file" name="file" class="input-ghost" />
    <div class="form-group">
      <div class="input-group input-file" name="Fichier1">
        <input type="text" class="form-control" placeholder='Choose a file...'/>
        <span class="input-group-btn">
          <button class="btn btn-default btn-choose" type="button">Choose</button>
     </span>
      </div>
    </div>
    <!-- COMPONENT END -->
    <div class="form-group">
      <button type="submit" class="btn btn-primary pull-right">Submit</button>
      <button type="reset" class="btn btn-danger">Reset</button>
    </div>
  </form>
</div>
<div class="col-md-8 col-md-offset-2">
  <ul>
    <li th:each="linker: ${linkers}">
      <a th:href="${linker.fileUrl}" rel="external nofollow" th:text="${linker.fileName}" />
    </li>
  </ul>
</div>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
  function bs_input_file() {
    $(".input-file").before(
      function() {
        if ( ! $(this).prev().hasClass('input-ghost') ) {
          var element = $(".input-ghost");
          element.change(function(){
            element.next(element).find('input').val((element.val()).split('\\').pop());
          });
          $(this).find("button.btn-choose").click(function(){
            element.click();
          });
          $(this).find("button.btn-reset").click(function(){
            element.val(null);
            $(this).parents(".input-file").find('input').val('');
          });
          $(this).find('input').css("cursor","pointer");
          $(this).find('input').mousedown(function() {
            $(this).parents('.input-file').prev().click();
            return false;
          });
          return element;
        }
      }
    );
  }
  $(function() {
    bs_input_file();
  });
</script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" />
</body>
</html>

這里重要的地方還是 <form> 標(biāo)簽內(nèi)的內(nèi)容， <form method="POST" action="/" enctype="multipart/form-data"> enctype 一定要寫成 multipart/form-data ,使用POST上傳文件，原有的上傳控件很丑，所以做了一個(gè)text+input放在表面，在下面放了一個(gè)隱形的上傳文件的input，可以自己看看代碼，本文就不啰嗦了。

下面還放了一個(gè)list用于展示文件列表，這里我們獲取到服務(wù)端提供的linkers對(duì)象，不斷foreach就可以獲得里面的兩個(gè)元素fileUrl和fileName。

這里jquery換成了微軟的CDN，webjars的總是引入不進(jìn)來，不知道什么原因。

其它設(shè)置

在 src/main/resources/application.properties 里設(shè)置上傳文件大小限制

spring.http.multipart.max-file-size=128MB
spring.http.multipart.max-request-size=128MB

另外在``還設(shè)置了文件默認(rèn)保存路徑：

package com.shuqing28.uploadfiles.config;
import org.springframework.boot.context.properties.ConfigurationProperties;
@ConfigurationProperties("storage")
public class StorageProperties {
  private String location = "/home/jenkins/upload-files/";
  public String getLocation() {
    return location;
  }
  public void setLocation(String location) {
    this.location = location;
  }
}

這里注意，由于StorageProperties的設(shè)置，在Application的那個(gè)類中要添加上

@EnableConfigurationProperties注解
@SpringBootApplication
@EnableConfigurationProperties(StorageProperties.class)
public class UploadApplication {
 public static void main(String[] args) {
 SpringApplication.run(UploadApplication.class, args);
 }
}

以上是“Spring Boot + thymeleaf如何實(shí)現(xiàn)文件上傳下載功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！