53日目(Spring Framework11) - 職業訓練覚え書き

ファイルアップロード

以前やったファイルアップロードをSpring MVCと連携させて実装する

利用方法

formタグにenctype属性をつける

<form action="" method="post" enctype="multipart/form-data">
※Springの<form:form>でも同じ

フォーム部品を用意

デプロイメント記述子(web.xml)

<multipart-config>
<location>C:/Users/tmp</location>
<max-file-size>1048576</max-file-size>
</multipart-config>
※1048576は1MBのこと

locationタグで決めたフォルダは作成しておく
(C:/Users/tmp)

Bean定義ファイル

※multipartResolverは、先のenctype属性の値であるmultipart/form-dataでアップロードされたファイルをSpringで扱うためのオブジェクト

さらに

<mvc:resources mapping="/uploads/**" location="/uploads/" />
uploadsフォルダに配置する予定なので、そのフォルダに画像リクエストがあった場合にSpringMVCが弾かないように、mvc:resourcesにuploadsフォルダを画像置き場として使えるように追記する

Controllerでの処理

アップロードされたファイルデータをMultipartFileオブジェクトとして取得
Multipart#transferTo()メソッドでディスクに書き込み

　※引数はweb.xmlのlocationタグで決めた一時保存パス

記述例

UploadController.java

@GetMapping("/upload")
public String get(
　　　HttpServletRequest request,
　　　Model model) {
　　// 画像一覧の取得
　File uploadsDirectory = new File(request.getServletContext().getRealPath("/uploads"));

　File[] fileList = uploadsDirectory.listFiles();

　model.addAttribute("fileList", fileList);

　return "upload";
}

@PostMapping("/upload")
public String post(
　　　@RequestParam MultipartFile upfile,
　　　HttpServletRequest request,
　// ※ファイル保存先指定時にHttpServlet型のオブジェクトが必要
　Model model) throws Exception {
　if(upfile.isEmpty()) {
　　// ファイル未選択の場合
　　return "redirect:/upload";
　} else {

　// ファイルのアップロード処理
　// ①元のファイル名を取得
　　String fileName = upfile.getOriginalFilename();
　　System.out.println("fileName:" + fileName);

　// ②保存先のパス情報を生成
　　File destination = new File(　// ※destination　目的地
　　request.getServletContext().getRealPath("/uploads") + "/" + fileName);

　// ③保存(一時ファイルパスから移動させる)
　　upfile.transferTo(destination);

　// 完了画面に遷移
　　model.addAttribute("fileName", fileName);
　　return "uploadDone";
　}
}

upload.jsp
アップロードフォームと画像一覧
<form action="" method="post" enctype="multipart/form-data">
　<p>ファイル：
　<input type="file" name="upfile" /></p>
　<input type="submit" value="アップロード" />
</form>

<h2>画像一覧</h2>
　<c:forEach var="file" items="${fileList}">
　<img src="uploads/<c:out value="${file.name}" />" width="100" />
</c:forEach>

uploadDone.jsp
完了メッセージと、戻るボタンのみ記述

今日はここまで。
というか今後は制作に入る。

まだスケジュールの見積もりもできないので、簡単なものを動作確認しつつ少しずつ作っていきたい所存