ProgrammingBackendSpring

[Spring Boot] MultipartFile + Modal 사용 파일 업로드

, , , , ,

Spring Boot에서 MultipartFile와 Bootstrap의 Modal을 사용하여 이미지 파일을 업로드하는 방법에 대해 알아보겠습니다.

Spring Boot 2.6.11 버전과 Bootstrap 5를 사용하였습니다.

MultipartFile

MultipartFile이란 스프링에서 업로드한 파일을 표현할 때 사용되는 인터페이스입니다. 파일 내용은 메모리에 저장되거나 임시로 디스크에 저장됩니다. 요청 처리가 끝나면 임시 저장소는 지워집니다.

설정

Spring Boot application.properties 설정 파일에 파일 업로드 경로와 파일 사이즈를 설정합니다. 윈도우 기준으로 d:/upload/ 경로로 파일을 업로드합니다.

1
2
3
4
5
# 지도 파일 업로드 경로
spring.servlet.multipart.location=d:/upload/

spring.servlet.multipart.max-file-size=512MB
spring.servlet.multipart.max-request-size=512MB
  • spring.servlet.multipart.location: 업로드된 파일의 임시 저장 공간
  • spring.servlet.multipart.max-file-size: 파일의 최대 사이즈 (default: 1MB)
  • spring.servlet.multipart.max-request-size: 요청의 최대 사이즈 (default: 10MB)

html

CDN을 통해 Bootstrap CSS와 JS를 포함합니다. 파일 업로드하는 모달 팝업 코드를 작성합니다.

파일 업로드 시 form 태그에 enctype="multipart/form-data"를 추가하고 input 태그 타입을 file로 작성해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>파일 업로드 예제</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
      파일 업로드
    </button>

    <!-- Modal -->
    <div id="uploadModal" class="modal fade" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white border-0">
            <h5 class="modal-title">지도 등록</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <form
            id="uploadForm"
            method="POST"
            action="/file/upload"
            class="form-horizontal"
            enctype="multipart/form-data"
          >
            <div class="modal-body">
              <div class="form-group row mb-2">
                <label class="col-form-label col-md-3">파일 </label>
                <div class="col-md-8">
                  <input type="file" class="form-control" name="file" accept="image/*" required />
                  <span class="text-muted"> ※ 이미지 파일만 업로드 가능합니다. </span>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="submit" class="btn btn-primary me-2">등록</button>
              <button type="button" class="btn btn-light" data-bs-dismiss="modal">닫기</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- /Modal -->
  </body>
</html>

JavaScript

Modal와 Form을 제어하는 JavaScript 코드를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// modal 닫기
const modalHide = (modalId) => {
  const modalEl = document.getElementById(modalId);
  const modal = bootstrap.Modal.getInstance(modalEl);
  modal.hide();
};

$('#uploadForm').submit(function (e) {
  e.preventDefault();
  const form = $(this);
  const url = form.attr('action');
  const formData = new FormData($('#uploadForm')[0]);

  $.ajax({
    url: url,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
      modalHide('uploadModal');
      alert('파일 업로드 성공');
    },
    error: function (response) {
      alert('파일 업로드 실패');
    },
  });
});

Java

Controller 파일을 생성합니다. 파일을 입력받고 저장하는 코드를 작성합니다.
MultipartFile의 transferTo() 함수를 사용하여 파일을 저장합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class FileController {

  @PostMapping("file/upload")
  @ResponseBody
  public ResponseEntity<?> upload(MultipartFile file) {
    if (file != null) {
      writeFile(file);
      return new ResponseEntity<>(HttpStatus.OK);
    }

    return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
  }

  /**
   * 파일 저장
   */
  private void writeFile(MultipartFile multipartFile) throws IOException {
    File file = new File(filePath);
    multipartFile.transferTo(file);
  }
}

파일을 업로드하는 코드를 작성해봤습니다. 파일 업로드에 대한 간략한 코드이므로 응용해서 사용할 수 있을 것 같습니다.

참고

Share