江帥帥：精通 Spring Boot 系列 06

時間 2020-06-23

原文原文鏈接

Spring Boot 文件的上傳下載html

說真的，在 Spring Boot 實現文件下載，真的是方便到讓我顫抖。Java 中實現文件上傳能夠用兩個組件：CommonMultipartResolver 和 StandardServletMultipartResolver。web

Spring Boot 在 web 模塊中集成了 Spring MVC ，文件上傳這塊兒的支持是能夠經過即插即用的 MultipartResolver 實現類：CommonMultipartResolver。若是用它，則須要使用 commons-fileupload 組件來處理。app

Spring Boot 提供的文件上傳自動化配置類是 MultipartAutoConfiguration 中默認使用了 StandardServletMultipartResolver，在上傳文件甚至可以作到零配置。dom

單文件上傳
1）添加 fileUpload.html 文件
在上傳頁面的表單中，添加一個 type 爲 file 的控件，用來選擇須要上傳的圖片文件。上傳的接口是「/upload」，另外 method 要設置爲「post」，還有 enctype 要設置爲「multipart/form-data」，代碼具體以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<p><input type="file" name="upload" value="選一張圖片"></p>
<p><input type="submit" value="開始上傳"></p>
</form>
</body>
</html>
2）添加 FileUploadController 文件
首先，設置咱們的文件上傳路徑爲項目運行目錄下的 upload 文件夾。而後，咱們用 MultipartFile 來綁定上傳的文件，使用 transferTo() 方法能夠很是方便實現文件存儲到磁盤當中。具體實現代碼以下：ide

@PostMapping("/upload")
public String upload(HttpServletRequest req, MultipartFile uploadFile) {post

String path = req.getSession().getServletContext().getRealPath("/upload/");
File folder = new File(path);

if (!folder.isDirectory()) {
    folder.mkdirs();
}

String oName = uploadFile.getOriginalFilename();
String nName = UUID.randomUUID().toString() + oName.substring(oName.lastIndexOf("."), oName.length());

try {
    uploadFile.transferTo(new File(folder + File.separator + nName));

    String filePath = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload/" + nName;

    return "ok";

} catch (IOException ex) {
    ex.printStackTrace();
}

return "error";

}
地址欄中，輸入 http://localhost:8080/fileUpload.html 選擇文件上傳，具體運行效果以下：ui

採用對象方式來上傳文件
不少時候的上傳操做，也都會把文件做爲對象的屬性進行保存，具體如何實現？下面經過註冊頁面，填寫用戶的相關信息，而後點擊註冊來上傳 User 對象。

1）添加 fileUpload2.html 文件
經過一個表單，來收集用戶的具體信息，而後點擊「註冊用戶」按鈕便可提交 /register 註冊請求。代碼具體以下：code

<body>
<form action="/register" method="post" enctype="multipart/form-data">
<p>用戶名：<input type="text" name="username"></p>
<p>密碼：<input type="text" name="password"></p>
<p>頭像：<input type="file" name="pic"></p>
<p><input type="submit" value="註冊用戶"></p>
</form>
</body>
2）添加 User 類
User 類主要是用來封裝用戶信息的，其中 MultipartFile 類型的 pic 是用來接收上傳的圖像文件。orm

public class User {htm

private String username;
private String password;
private MultipartFile pic;

// getter 和 setter 方法

}
3）添加 userRegister() 方法
在 userRegister() 方法形參列表中，使用 @ModelAttribute 註解將表單提交的數據綁定到 User 對象中，其中圖片會保存到 User 的 pic 屬性中，而後轉換爲 Multipart 類型。文件上傳成功以後，全部的用戶信息都保存到 model 當中。

@Controller
public class FileUploadController {

@PostMapping("/register")
public String userRegister(HttpServletRequest req, @ModelAttribute User user, Model model) throws Exception {
    if (!user.getPic().isEmpty()) {

        String picPath = req.getServletContext().getRealPath("/upload/");
        String picName = user.getPic().getOriginalFilename();

        File filePath = new File(picPath, picName);

        if (!filePath.getParentFile().exists()){
            filePath.getParentFile().mkdirs();
        }

        user.getPic().transferTo(new File(picPath + File.separator + picName));

        model.addAttribute("user", user);
        return "userMsg";

    } else {
        return "error";
    }
}

}
3）在 templates 目錄中，添加 userMsg.html 文件

<body>
<table>
<tr>
<td><img th:src="@{'upload/'+${user.pic.originalFilename}}" height="100"/></td>
<td th:text="${user.username}">用戶名</td>
</tr>
</table>
</body>
運行效果，具體以下：

多文件上傳
1）添加 fileUpload2.html 頁面
<form action="/uploadFiles" method="post" enctype="multipart/form-data">
<p>選第一張圖片：<input type="file" name="uploadFiles"></p>
<p>選第二張圖片：<input type="file" name="uploadFiles"></p>
<p>選第三張圖片：<input type="file" name="uploadFiles"></p>
<p><input type="submit" value="開始上傳"></p>
</form>
</body>
2）添加 uploadFiles() 方法br/>@PostMapping("/uploadFiles")
public String uploadFiles(MultipartFile[] uploadFiles, HttpServletRequest req) {

String path = req.getSession().getServletContext().getRealPath("/upload/");
File folder = new File(path);

if (!folder.isDirectory()) {
folder.mkdirs();
}

if (null != uploadFiles && uploadFiles.length > 0) {
```
for (MultipartFile uploadFile : uploadFiles) {

    String oName = uploadFile.getOriginalFilename();
    String nName = UUID.randomUUID().toString() + oName.substring(oName.lastIndexOf("."), oName.length());

    try {

        uploadFile.transferTo(new File(folder, nName));
        return "ok";

    } catch (IOException ex) {
        ex.printStackTrace();
    }
}
```
}

return "error";
}
運行結果，具體以下：

文件下載
1）編輯 userMsg.html 頁面
<table>
<tr>
<td><img th:src="@{'upload/'+${user.pic.originalFilename}}" height="100"/></td>
<td th:text="${user.username}">用戶名</td>
<td><a th:href="@{download(pic=${user.pic.originalFilename })}">下載頭像</a></td>
</tr>
</table>
2）添加 downloadPic() 方法
這裏使用了 ResponseEntity 類型，就能定義返回的 HttpHeaders、BodyBuilder 和 HttpStatus，而後返回客戶端下載。

@RequestMapping(value="/download")
public ResponseEntity<byte[]> downloadPic(HttpServletRequest request, @RequestParam("pic") String filename, @RequestHeader("User-Agent") String userAgent, Model model)throws Exception{

String path = request.getServletContext().getRealPath(
    "/upload/");

File file = new File(path + File.separator + filename);

BodyBuilder builder = ResponseEntity.ok();
builder.contentLength(file.length());
// 二進制流數據
builder.contentType(MediaType.APPLICATION_OCTET_STREAM);

// 解碼
filename = URLEncoder.encode(filename, "UTF-8");

if (userAgent.indexOf("MSIE") > 0) {
    // IE
    builder.header("Content-Disposition", "attachment; filename=" + filename);
} else {
    // FireFox、Chrome
    builder.header("Content-Disposition", "attachment; filename*=UTF-8''" + filename);
}
return builder.body(FileUtils.readFileToByteArray(file));

}
運行效果，具體以下：

本文來源於：奈學開發者社區-江帥帥

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。