記事のディレクトリ
ゼロ、学習目標
- SpringBootの使用をマスターしてファイルアップロード機能を実現する
1.ファイルアップロードの概要
Webアプリケーションを開発する場合、ファイルのアップロードは非常に一般的な要件です。ブラウザはファイルをフォームの形式のストリームの形式でサーバーに渡し、サーバーはアップロードされたデータを解析して処理します。SpringBootでのファイルのアップロードSpringMVCフレームワークに似ています。
次に、ファイルアップロード機能を実現します
（1）SpringBootプロジェクトを作成します
- FileUploadDemoプロジェクトを作成し、WebとThymeleafの依存関係を追加します
（2）ブートストラップを統合する
- 11番目の講義プロジェクトSpringMvcDemo2021のresources / staticのbootstrap-4.0.0を、現在のプロジェクトの対応する場所にコピーします。
（3）ファイルアップロードページを書く
- テンプレートディレクトリにファイルアップロードページを作成します-fileupload.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet"></link>
<script th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></script>
<script th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></script>
<script>
function add() {
var innerDiv = "<div>";
innerDiv += "<input type='file' name='files' required='required' class='m-2'/>"
innerDiv += "<input type='button' value='删除' οnclick='remove(this)'/>"
innerDiv += "</div>";
$("#file").append(innerDiv);
}
//删除整个文件上传div包括2个input
function remove(obj) {
$(obj).parent().remove();
//$(obj).remove();// 仅删除按钮
}
</script>
</head>
<body>
<div class="col-xl-6 m-auto text-lg-left bg-info pt-3 pl-5">
<div th:if="${uploadMsg}" th:text="${uploadMsg}" class="m-2 text-danger">恭喜，上传成功！</div>
<form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">
上传文件 <input th:type="button" th:value="添加文件" th:onclick="add()" class="m-2"/>
<div th:text="文件上传区域" id="file"></div>
<input th:type="submit" value="上传" class="bg-info btn bg-warning m-2"/>
</form>
</div>
</body>
</html>
- フォームメソッドを使用する必要があります
post - フォームのenctypeは
multipart/form-data
（4）プロジェクト構成ファイルをコンパイルします
#thymeleaf配置
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/
#文件上传配置
#可多文件上传
spring.servlet.multipart.enabled=true
#单个文件大小50M
spring.servlet.multipart.max-file-size=52428800
#总文件大小300M
spring.servlet.multipart.max-request-size=314572800
- 構成ファイルのアップロードファイルのサイズはMの単位ではなく、バイトであることに注意してください。
- 50M = 50 * 1024 * 1024 B = 52428800 B
- 300M = 300 * 1024 * 1024 B = 314572800 B
（5）ファイルアップロードコントローラーを作成する
package net.hw.lesson14.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;
/**
* 功能：文件上传控制器
* 作者：华卫
* 日期：2021年02月28日
*/
@Controller
public class FileUploadController {
@RequestMapping("/toFileUpload")
public String toUpload(HttpServletRequest request, Model model) {
return "fileupload";
}
@RequestMapping("/uploadFile")
public String fileUpload(MultipartFile[] files, Model model, HttpServletRequest request) {
// 定义上传目录
File dir = new File("D://upload");
try {
if (!dir.exists()) {
dir.mkdir();
}
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
String filename = UUID.randomUUID() + "_" + file.getOriginalFilename();
InputStream in = file.getInputStream();
FileOutputStream out = new FileOutputStream(new File(dir, filename));
byte[] b = new byte[1024];
int len;
while ((len = in.read(b)) != -1) {
out.write(b, 0, len);
}
in.close();
out.close();
model.addAttribute("uploadMsg", "恭喜，文件上传成功！");
}
} catch (Exception e) {
System.out.println(e.getMessage());
}
return "fileupload";
}
}
（6）アプリケーションを起動し、効果をテストします
- アクセス
http://localhost:8080/uploadFile
- 正常にアップロードされたファイルを表示する
- ファイルアップロードコントローラーのuploadFileメソッドのコードを変更します
- アプリケーションを起動し、効果をテストします
3.クラス開発演習の後-アップロードされたファイルのタイプを制御します
- アップロードしたファイルのcontentType（
String contentType = file.getContentType();）で判断でき、要件を満たすファイルがディスクに書き込まれます。そうでない場合はエラーメッセージが返されます。 - ファイルが指定されたサイズを超えている場合は、コントローラーで判断することもでき、フレンドリーなプロンプトがフロントデスクにフィードバックされます。
- フロントデスクでは、フォームを送信する前にjsを使用して予備的な判断を行うこともできます。