Spring Boot + thymeleaf 實現文件上傳下載

時間 2019-11-17

標籤 spring boot thymeleaf 實現文件上傳下載欄目 Spring 简体版

原文原文鏈接

最近同事問我有沒有有關於技術的電子書，我打開電腦上的小書庫，可是郵件發給他太大了，公司又禁止用文件夾共享，因而花半天時間寫了個小的文件上傳程序，部署在本身的Linux機器上。javascript

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

原有的上傳那塊很醜，寫了點js代碼優化了下，最後界面顯示以下圖：html

先給出成果，下面就一步步演示怎麼實現。前端

1.新建項目

首先固然是新建一個spring-boot工程，你能夠選擇在網站初始化一個項目或者使用IDE的Spring Initialier功能，均可以新建一個項目。這裏我從IDEA新建項目：java

下一步，而後輸入group和artifact，繼續點擊next：jquery

這時候出現這個模塊選擇界面，點擊web選項，勾上Web，證實這是一個webapp,再點擊Template Engines選擇前端的模板引擎，咱們選擇Thymleaf，spring-boot官方也推薦使用這個模板來替代jsp。

最後一步，而後等待項目初始化成功。

2.pom設置

首先檢查項目須要添加哪些依賴，直接貼出個人pom文件：web

<?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，最後兩個webjars整合了bootstrap和jquery，其它的等代碼裏用到再說。ajax

最後一個Spring boot maven plugin是系統建立時就添加的，它有如下好處：spring

1 . 它可以打包classpath下的全部jar，構建成一個可執行的「über-jar」，方便用戶轉移服務apache

2 . 自動搜索public static void main()方法而且標記爲可執行類

3 . 根據spring-boot版本，提供內建的依賴解釋。

3. 上傳文件控制器

若是你只是使用SpringMVC上傳文件，是須要配置一個MultipartResolver的bean的，或者在web.xml裏配置一個<multipart-config>,不過藉助於spring-boot的自動配置，你什麼都沒必要作。直接寫控制器類，咱們在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註解，證實這是一個Controller，每一個方法前添加了@GetMapping和@PostMapping分別相應Get和Post請求。

首先是@GetMapping("/"),方法listUploadedFiles，顧名思義，顯示文件列表，這裏咱們藉助於storageService遍歷文件夾下的全部文件，而且用map方法提合成了連接和文件名列表，返回了一個Linker對象的數組,Linker對象是一個簡單pojo，只包含下面兩部分:

private String fileUrl;
private String fileName;
複製代碼

這個方法包含了對Java8中Stream的使用，若是有不理解的能夠看看這篇文章Java8 特性詳解（二） Stream API.

接下來是@GetMapping("/files/{filename:.+}")，方法是serveFile,該方法提供文件下載功能，仍是藉助於storageservice，後面會貼出storageservice的代碼。最後使用ResponseEntity，把文件做爲body返回給請求方。

@PostMapping("/")的handleFileUpload使用Post請求來上傳文件，參數@RequestParam("file")提取網頁請求裏的文件對象，仍是使用storageService來保存對象，最後使用重定向來刷新網頁，而且給出成功上傳的message。

4. 文件處理

上面Controller調用的不少方法由StorageService提供，咱們定義一個接口，包含如下方法：

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();
}
複製代碼

由於我這裏只是藉助於本地文件系統處理文件的長傳下載，因此有了如下實現類：

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());
    }
}
複製代碼

這個類也基本運用了Java的NIO，使用Path對象定義了location用於文件的默認保存路徑。

先看store方法，store接受一個MultipartFile對象做爲參數，想比於傳統JSP中只是傳二進制字節數組，MultipartFile提供了不少方便調用的方法讓咱們能夠獲取到上傳文件的各項信息：

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對應的Path裏，固然咱們也可使用transferTo方法保存文件，file.transferTo(this.rootLocation.resolve(filename).toFile());

loadAll方法加載該路徑下的全部文件Path信息，loadAsResource則是加載文件爲一個Resource對象，再看Controller的代碼，最後是接受一個Resource對象做爲body返回給請求方。

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}">
   <h2 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" style="visibility:hidden; height:0"/>
       <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}" 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" />
</body>
</html>
複製代碼

這裏重要的地方仍是<form>標籤內的內容，<form method="POST" action="/" enctype="multipart/form-data">enctype必定要寫成multipart/form-data,使用POST上傳文件，原有的上傳控件很醜，因此作了一個text+input放在表面，在下面放了一個隱形的上傳文件的input，能夠本身看看代碼，本文就不囉嗦了。

下面還放了一個list用於展現文件列表，這裏咱們獲取到服務端提供的linkers對象，不斷foreach就能夠得到裏面的兩個元素fileUrl和fileName。

這裏jquery換成了微軟的CDN，webjars的老是引入不進來，不知道什麼緣由。

其它設置

在src/main/resources/application.properties裏設置上傳文件大小限制

spring.http.multipart.max-file-size=128MB
spring.http.multipart.max-request-size=128MB
複製代碼

另外在``還設置了文件默認保存路徑：

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的設置，在Application的那個類中要添加上

@EnableConfigurationProperties註解

@SpringBootApplication
@EnableConfigurationProperties(StorageProperties.class)
public class UploadApplication {

	public static void main(String[] args) {
		SpringApplication.run(UploadApplication.class, args);
	}
}
複製代碼

說到這項目基本能夠運行了，固然你也能夠添加須要的內容繼續完善它。