エキサイト株式会社エンジニアの佐々木です。小ネタですが、画像を受け取ってそのまま表示する方法のメモです。
はじめに
SpringBootで画像を受け取って表示する簡単なサンプルです。フォームでファイルをアップロードし、それをそのまま表示するだけのデモアプリになります。
HTML
テンプレートエンジンでThymeleafを使用します。普通のHTMLとして記述できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input type="file" name="file"/> <button type="submit" formenctype="multipart/form-data" formmethod="post" formaction="/upload">MultipartFile送信</button> </form> </body> </html>
サーバ
サーバの方は、コントローラに実装を書いていきます。今回は、Thymeleafを使用するので、 @Controller を使います。
@Controller @RequestMapping @RequiredArgsConstructor public class RootController { @GetMapping public String index(){ return "index"; } @ResponseBody // テンプレートは使用せずに、メソッドで返却したものBodyとして扱う指定 @PostMapping(value = "upload" , consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public Object upload(@RequestPart("file") MultipartFile filePart) throws IOException { // ファイルの場合は、 `@RequestPart` を使うことを注意 File file = File.createTempFile(UUID.randomUUID().toString(), filePart.getOriginalFilename()); // ファイル名を取得し、Fileインスタンスを生成 filePart.transferTo(file.toPath()); byte[] bytes = Files.readAllBytes(file.toPath()); //ファイルの読み込み HttpHeaders httpHeaders = new HttpHeaders(); httpHeaders.setContentType(MediaType.parseMediaType(Files.probeContentType(file.toPath()))); // ファイル名からMimeTypeを取得する httpHeaders.setContentLength(bytes.length); return new HttpEntity<>(bytes, httpHeaders); //レスポンス } }
ファイルアップロードのパラメータに関しては、 @RequestPart を使用します。フォームで送信されたファイルをFiles.readAllBytes()で読み込みます。あとは、レスポンスに入れるだけなので、HttpEntityにデータを入れれば画像の表示ができます。
まとめ
Javaはファイルの扱いが結構面倒な言語なんで、スクリプト言語に比べると面倒に感じるかもしれません。(byte配列への変換とか)。最近ではFilesクラスやPathsクラスが便利になってきているので、それほど辛くはないと思います。(以前はxxxxReaderBufferとか色々あって辛かった)
最後に
エキサイトではフロントエンジニア、バックエンドエンジニア、アプリエンジニアを随時募集しております。長期インターンも歓迎していますので、興味があれば連絡いただければと思います。
カジュアル面談はこちらになります！ meety.net
募集職種一覧はこちらになります！(カジュアルからもOK) www.wantedly.com
