参考サイトを見る

ファイルアップロードについては、参考サイトではUserFormにて以下のような取り扱いをしています。MultipartFileという型で受け取っていますね。

// 添付ファイル
    @ContentType(allowed = { MediaType.IMAGE_PNG_VALUE, MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_GIF_VALUE })
    transient MultipartFile userImage; // serializableではないのでtransientにする

フォームオブジェクトなのでpost時に取得ができます。参考サイトではUploadFileクラスに変換して実際の登録などの処理に回しています。

@PostMapping("/edit/{userId}")
    public String editUser(@Validated @ModelAttribute("userForm") UserForm form, BindingResult br,
            @PathVariable Long userId, SessionStatus sessionStatus, RedirectAttributes attributes) {
省略
  val image = form.getUserImage();
  if (image != null && !image.isEmpty()) {
     val uploadFile = new UploadFile();
     MultipartFileUtils.convert(image, uploadFile);
     user.setUploadFile(uploadFile);
  }
省略

参考サイトでは添付ファイルを専用のテーブルに登録しているようです。

// 添付ファイルがある場合は、登録・更新する
val uploadFileId = inputUser.getUploadFileId();
if (uploadFileId == null) {
  uploadFileDao.insert(uploadFile);
} else {
  uploadFileDao.update(uploadFile);
}

UploadFileクラスには変換していましたが、どのようなことをやっていたかというと結構シンプルでした。ファイル名などの情報も取得するのは容易そうです。

to.setFilename(from.getName());
to.setOriginalFilename(from.getOriginalFilename());
to.setContentType(from.getContentType());

ざっくりコントローラーを作成する

github

動きを見てみないとなんともわからないのでとりあえずコントローラーを作ってみます。

まずは受け取ったファイルの情報を表示してみるだけです

package com.volkruss.iroiro.controller.testupload;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class TestUploadController {

	@PostMapping("/upload")
	public ModelAndView testFileUpdate(@RequestParam("file") MultipartFile file) {
		System.out.println(file.getName());
		System.out.println(file.getOriginalFilename());
		System.out.println(file.getContentType());
		return new ModelAndView();
	}
}

PostMan

フォーム画面を作るのが面倒なのでpostmanを使います

createNewで始めます

POSTにしてBodyを選択してKEYのtypeをFileに設定するとVALUEでファイルが選択できます

あとはsendを押してコンソールを確認します。きちんと情報が取得できているのを確認できます。

file
back01.jpg
image/jpeg

エラーが起きていますが、ファイルの取得とは関係ないので無視します。

ファイルサイズが大きいとエラーになる場合があります。これはapplication.yamlを修正します

spring:
  datasource:
    driver-class-name: org.postgresql.Driver
    url: jdbc:postgresql://192.168.11.13:5432/misaka
    username: misaka
    password: mikoto
  servlet:
    multipart:
      max-file-size: -1
      max-request-size: 20MB

-1とするとファイルのサイズに上限を設けません。リクエストで受け付ける上限は20MBに設定などもできます。

もし403エラーが出る場合は、SpringSecurityのcsrfを無効化しておきます

@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.csrf().disable();
	}

ファイルの内容

github

ファイルがアップロードできることは確認できましたので、ファイルの中身をどうにかします。

実は参考サイトの変換処理には続きがあってgetBytesメソッドで中身を取得していました。BZip2Dataというのはおそらく圧縮処理だと思われます。

通常はbyte[]を返すようなのでそのまま利用しても問題はなさそうです。

try {
    to.setContent(BZip2Data.of(from.getBytes()));
} catch (IOException e) {
    log.error("failed to getBytes", e);
    throw new IllegalArgumentException(e);
}

画像とかテキストとか処理しないと。。。ってことはありませんよね？通常はアップロードできるファイルの種類を絞るはずなので、今回は画像ファイルに絞ってみます。

参考

参考

海外の方は本当にクオリティの高い動画をアップロードしてくれるので助かります＞＜しかもgithubに上げてくれています。

画像ファイルは以下のような形で保存すれば良さそうです

参考動画ではjpaを利用してデータベースにレコードを登録していますので、そこまでやっていきます。

画像の表示時にも少しポイントがありそうですが、ここを実装しながら確認していきます。

<tr th:each="product : ${products}">
	<th scope="row"><img alt="" th:src="*{'data:image/jpeg;base64,'+{product.image}}" style="width: 100px;height: 100px;"></th>
	<td>[[*{product.name}]]

Dtoを作成します。データベースのテーブルと紐づけるためにtableアノテーションなどを付与しています。

package com.volkruss.iroiro.domain.dto.item;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Getter;
import lombok.Setter;

@Table(name = "items")
@Entity
@Getter
@Setter
public class Item {
	
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(name = "id")
	private int id;
	
	@Column(name = "name")
	private String name;
	
	@Column(name = "image")
	private String image;

}

コントローラーを修正します。

package com.volkruss.iroiro.controller.testupload;

import java.io.IOException;
import java.util.Base64;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import com.volkruss.iroiro.domain.dto.item.Item;
import com.volkruss.iroiro.domain.repository.item.ItemRepository;

@Controller
public class TestUploadController {
	
	@Autowired
	private ItemRepository itemRepository;

	@PostMapping("/upload")
	public ModelAndView testFileUpdate(@RequestParam("file") MultipartFile file) {
		
		Item item = new Item();
		
		item.setName(file.getOriginalFilename());
		try {
			item.setImage(Base64.getEncoder().encodeToString(file.getBytes()));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		itemRepository.save(item);

		return new ModelAndView();
	}

	@GetMapping("/all")
	public String showItems(Model model) {
		List<Item> items = itemRepository.findAll();
		model.addAttribute("items",items);
		return "modules/item/all.html";
	}
}

ビューでは参考動画と同じように画像を表示します

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <title>商品一覧</title>
    </head>
    <body>
    	<table border="1">
    		<thead>
    			<tr>
    				<th>filename</th>
    				<th>image</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr th:each="item : ${items}">
    				<td th:text="${item.name}"></td>
    				<td>
    					<img alt="" th:src="*{'data:image/jpeg;base64,'+{item.image}}" style="width: 100px;height: 100px;"></th>
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </body>
</html>

いくつかpostmanでデータを登録しておきます。データベースには画像データが文字列で保存されています

画面を確認すると、きちんと画像が表示されています。※著作権に配慮して画像を修正しています

画像ファイルをアップロードしてデータベースに保存するのもさほど難しい処理ではありませんでした。

Springbootでファイルをアップロードする