Spring 파일 업로드 ② - uploadForm으로 업로드 구현하기
Contents
- uploadForm.html 작성
- 위의 html과 연동되는 uploadController 코드 작성
이번 글에서는 form 형태로 파일 업로드 요청을 보내는 과정을 정리해보겠습니다.
1. uploadForm.html
전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>uploadForm</title>
</head>
<body>
<h1>File upload</h1>
<form action="uploadFormPost" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" multiple />
<br />
<button type="submit">Upload</button>
</form>
</body>
</html>1.1 enctype
Form 형태를 사용할 때 가장 중요한 부분은 enctype입니다.
앞선 글에서 설명했던 것처럼, 파일은 단순 문자열이 아니라 Binary 데이터이기 때문에 multipart/form-data 형식으로 전송해야 합니다.
따라서 enctype="multipart/form-data" 설정은 반드시 필요합니다. 이 부분이 빠지면 파일은 정상적으로 전송되지 않습니다.
1.2 input 태그의 name
다음으로 중요한 것은 input 태그의 name 속성입니다.
이 이름은 컨트롤러에서 파일을 받을 때 사용하는 파라미터 이름과 정확히 일치해야 합니다.
즉, form의 name="uploadFile"과 컨트롤러의 MultipartFile[] uploadFile은 서로 연결되어 있습니다.
2. Controller
2.1 화면을 보여주기 위한 GET 요청
먼저 업로드 화면을 보여주기 위한 @GetMapping(“uploadForm”) 메서드를 작성합니다.
이 메서드는 단순히 uploadForm 화면을 return 하는 역할을 합니다.
@GetMapping("uploadForm")
public void uploadForm() {
log.info(MyUtil.getColor() + "uploadForm called" + MyUtil.END);
}2.2 파일 업로드를 처리하는 POST 요청
@PostMapping("uploadFormPost")
public void uploadFormPost(MultipartFile[] uploadFile) {
String uploadFolder = System.getProperty("user.home") + "/…/upload";
File dir = new File(uploadFolder);
if (!dir.exists()) dir.mkdirs();
for (MultipartFile f : uploadFile) {
log.info(MyUtil.getColor() + "Upload Filename : " + f.getOriginalFilename() + MyUtil.END);
log.info(MyUtil.getColor() + "Upload FileSize : " + f.getSize() + MyUtil.END);
File saveFile = new File(uploadFolder, f.getOriginalFilename());
try {
f.transferTo(saveFile);
log.info(MyUtil.getColor() + f.getOriginalFilename() + " 파일 업로드 성공" + MyUtil.END);
} catch (Exception e) {
log.error(MyUtil.getColor() + e.getMessage() + MyUtil.END);
}
}
}2.2.1 업로드 폴더 생성
String uploadFolder = System.getProperty("user.home") + "/Desktop/25fall_backend/Spring/upload";
File dir = new File(uploadFolder);
if (!dir.exists()) dir.mkdirs();먼저 파일이 저장될 경로를 지정(임시폴더)하고, 해당 폴더가 존재하지 않으면 생성해줍니다.
2.2.2. 파일 정보 확인 및 저장 파일 객체 생성
for (MultipartFile f : uploadFile) {
log.info(MyUtil.getColor() + "Upload Filename : " + f.getOriginalFilename() + MyUtil.END);
log.info(MyUtil.getColor() + "Upload FileSize : " + f.getSize() + MyUtil.END);
File saveFile = new File(uploadFolder, f.getOriginalFilename());여러 개의 파일이 업로드될 수 있기 때문에 반복문(for)을 사용해줍니다.
(1) 현재 파일에 대한 정보를 log로 출력
- getOriginalFilename()으로 실제 파일 이름을 확인
- getSize()로 파일 크기를 확인
(2) saveFile 이라는 파일 객체를 만들기 - new File(uploadFolder, f.getOriginalFilename()) : 해당 폴더 안에 동일한 이름의 파일 객체를 생성하는 코드
이 때 new File(…) 는 파일 객체를 만드는 것입니다. 실제 파일이 만들어지는 것이 아닌 uploadFolder에 파일의 이름을 만들 예정이라는 뜻입니다. 실제 파일은 추후에 나옵니다.
2.2.3. trasferTo()를 이용한 실제 저장
try {
f.transferTo(saveFile);
log.info(MyUtil.getColor() + f.getOriginalFilename() + " 파일 업로드 성공" + MyUtil.END);
} catch (Exception e) {
log.error(MyUtil.getColor() + e.getMessage() + MyUtil.END);
}
}- trasferTo(saveFile) : 메모리에 있는 파일 데이터를 우리가 지정한 경로(saveFile)로 복사해서 실제 파일로 저장하라는 메서드
trasferTo() 메서드를 이용해 실제로 파일을 저장합니다.
3. 실제 실행
3.1 첫화면
3.2 업로드 할 파일 선택
3.3 업로드 성공
3.3.1 파일 정보 출력 확인
3.3.2 임시 폴더에 파일 들어옴 확인
💭 마무리하며
이렇게 form 방식을 이용하여 파일을 업로드하는 과정을 정리해보았습니다.
흐름을 이해하기에는 좋았지만, 실제 서비스에 적용하기에는 여러 한계가 존재합니다.
다음 글에서는 이러한 문제를 해결하기 위해 Ajax 방식을 이용한 파일 업로드를 구현해보려고 합니다.
'Spring > multipart' 카테고리의 다른 글
| Spring 파일 업로드 ⑤ - 이미지 판별 & 썸네일 생성 + 업로드 결과 출력 (0) | 2026.03.26 |
|---|---|
| Spring 파일 업로드 ④ - 파일 크기, 확장자 제한 & UUID 파일 이름 처리 (0) | 2026.03.18 |
| Spring 파일 업로드 ③ uploadAjax – Ajax 이용하기 (0) | 2026.03.06 |
| Spring 파일 업로드 ① - multipart/form-data 개념과 기본 설정 (1) | 2026.02.18 |