Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

SpringBoot ファイルアップロードをする方法(MultipartFile)

Spring Boot の Webアプリで、ファイルをアップロードする方法を書いていきます。

目次

  1. バージョン
  2. コントローラーの作成
  3. アップロードサイズの制限
  4. アップロード画面の作成
  5. 結果画面の作成
  6. 起動クラスの作成
  7. ビルドファイルの作成
  8. 動作確認

1. バージョン

動作確認で使用した製品のバージョンは以下の通りです。

  • Spring Boot 3.0.1
  • Java 17

2. コントローラーの作成

ファイルアップロードを受け付けて、ファイルを保存するクラスを作成します。

src/main/java/org/example/controller/UploadController.java

package org.example.controller;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;

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;

@Controller
public class UploadController {
  @PostMapping("/upload")
  public String upload(@RequestParam MultipartFile file) throws IOException {
    Path dst = Path.of("ディレクトリのパス", file.getOriginalFilename());
    Files.copy(file.getInputStream(), dst);
    return "redirect:/result.html";
  }
}

アップロードされたファイルの名前を取得して、指定したディレクトリに保存します。

3. アップロードサイズの制限

設定ファイルでアップロードサイズを制限することができます。

src/main/resources/application.properties

# ファイルサイズの合計の最大値
spring.servlet.multipart.max-file-size=1MB

# リクエストサイズの最大値
spring.servlet.multipart.max-request-size=10MB

上の値がデフォルトになります。

4. アップロード画面の作成

ファイルアップロード用の HTML を作成します。

src/main/resources/static/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ファイルアップロード</title>
</head>
  <body>
    <form action="/upload" method="post" enctype="multipart/form-data">
      <p><input type="file" name="file"></p>
      <p><input type="submit" id="upload" value="アップロード"></p>
    </form>
  </body>
</html>

5. 結果画面の作成

アップロードが成功した時の HTML を作成します。

src/main/resources/static/result.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ファイルアップロード結果画面</title>
</head>
  <body>
    <p>アップロード成功</p>
  </body>
</html>

6. 起動クラスの作成

アプリを起動するクラスを作成します。

src/main/java/org/example/SpringApp.java

package org.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringApp {
  public static void main(String[] args) {
    SpringApplication.run(SpringApp.class, args);
  }
}

7. ビルドファイルの作成

Maven のビルドファイルを作成します。

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.0.1</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <groupId>org.example</groupId>
  <artifactId>spring-fileupload</artifactId>
  <version>1.0.0</version>

  <properties>
    <java.version>17</java.version>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

7. 動作確認

アプリを起動して以下の URL にアクセスします。

http://localhost:8080/index.html

ボタン「ファイルを選択」を押してファイルを選択します。「アップロード」を押して、処理が成功すると画面が遷移します。