junseob 의 개발 블로그

HTTP 멀티파트

3 min read

개요

브라우저에서 서버로 파일 보내려면 기본적으로 멀티파트라는걸 써야 하는데 멀티파트가 뭔지 에대해서 찾아보았다.

메모

<form method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
  <button type="submit">업로드</button>
</form>

요런식으로 form 태그에 multipart/form-data 라고 써줘야 파일전송이 됩니다. 그냥 form 으로는 텍스트만 보낼 수 있음

파일이 전송되는 과정을 보면 이런 느낌임

sequenceDiagram
    participant 브라우저
    participant 서버
    
    브라우저->>서버: 1. 파일 선택해서 전송
    Note over 브라우저,서버: multipart/form-data로 쪼개서 전송
    서버->>서버: 2. 파일 조각 모아서 저장
    서버-->>브라우저: 3. 업로드 완료 응답

실제 구현은 이렇게 하면 됨

스프링에서는 요런 느낌으로 구현하면 됨

@PostMapping("/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
    try {
        // 1. 파일 저장할 경로 정하기
        String uploadDir = "uploads/";
        
        // 2. 파일명 중복 방지
        String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
        
        // 3. 실제 파일 저장
        file.transferTo(new File(uploadDir + fileName));
        
        return "업로드 성공함";
    } catch(Exception e) {
        return "업로드 실패함 ㅠ";
    }
}

이러면 끝인데 실제로는 예외처리랑 파일 용량 제한같은것도 해줘야 됨

주의할 점

  1. 파일 크기 제한 걸어두기 (보통 10MB 정도)
  2. 확장자 검사해서 이상한 파일 거르기
  3. 파일명에 이상한 문자 들어있는지 체크하기

저장할 때 UUID 써서 중복 방지하기 이정도만 하면 기본적인 파일 업로드는 됨

출처

MDN - Form 데이터 스프링 공식문서 - Multipart

오늘—전체—