MultipartFile와 Ajax를 활용한 파일 업로드

💡 Issue

• Type을 File로 선택시, 로컬에서 파일을 서버로 전송하여 저장하는 로직을 구현하는 중이다.

• 파일을 서버로 전송할 때, 주로 Multipart-File을 자주 사용한다.

 

💡 Multipart-File이란?

• 클라이언트와 서버간에 전송되는 HTTP 요청-응답에서 주로 파일 업로드와 관련한 데이터를 전송할 때 사용된다.

• HTTP는 기본적으로 텍스트 기반 (JSON)으로 요청-응답하지만, 파일과 같은 이진 데이터를 전송해야할 때는, 이진 데이터를 텍스트 형식으로 인코딩하는 과정이 비효율적이며 제한적이다.

• 🔑 Multipart는 이러한 이진데이터(파일)을 인코딩하지 않고, 원본 형식 그대로 전송할 수 있다.

• 이를 사용하려면, HTTP Content-Type Header에 ‘multipart/form-data’ 형식으로 전송하면 된다.

 

💡 Mutlipart Streaming 방식의 저장방법

• 전체 데이터 수신
  • 서버 → 클라이언트로 전체 멀티파트 데이터 수신

• 메모리/디스크에 저장
  • 수신된 데이터를 메모리나 임시 디스크 파일에 저장

• 분석 및 처리
  • 저장된 데이터를 파싱하여 개별 파트로 분리하고, 각 파트를 처리 (multipart인 이유)

 

💡 프로젝트 코드 분석 - AJAX로 구현 (FORM 태그 X)

• uploadFile (AJAX)

  	function uploadFile() {
  			let targetPathInput = document.getElementById("target_path");
              const fileInput = document.getElementById('file-upload');
              const file = fileInput.files[0];
              const formData = new FormData();
              formData.append('file', file);
  
              fetch('/upload-file', {
                  method: 'POST',
                  body: formData 
              })
              .then(response => response.json())
              .then(data => {
                  if (data.message.includes("성공")) {
                      document.getElementById('file_path').value = data.data;
                      targetPathInput.value = data.data;
                  } else {
                      alert('파일 업로드 중 오류가 발생했습니다: ' + data.message);
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  alert('파일 업로드 중 오류가 발생했습니다.');
              });
          }

  • fetch의 body를 formData로 설정시, 자동으로 해당 데이터를 multipart/form-data 형식으로 인코딩하여 전송할 수 있다.

• Service (back)

  	/**
  	 * 사용자의 로컬 파일을 서버에 저장
  	 * 
  	 * @param file 사용자의 로컬 파일 
  	 */
  	public String saveFileInServer(MultipartFile file) {
  		
  		String saveFilePath = System.getProperty("user.dir") + TARGET_SAVE_PATH;
  		String fileName = file.getOriginalFilename();
  		String fileNameWithoutExtension = fileName.substring(0, fileName.lastIndexOf("."));
  		String fullPath = saveFilePath + fileName;
  		try {
  			if(isValidDirectoryPath(fullPath)) {
  				throw new DuplicatedFileException(ErrorCode.DUPLICATED_FILE_EXCEPTION);
  			}
  			if(!file.isEmpty() && isFileTar(fileName)) {
  				file.transferTo(new File(fullPath));
  			} else if(!isFileTar(file.getOriginalFilename())) {
  				throw new FailedToSaveLocalFileException(ErrorCode.NOT_TAR_EXTENSION);
  			}
  			return fileNameWithoutExtension;
  		} catch (IllegalStateException | IOException e) {
  			throw new  FailedToSaveLocalFileException(ErrorCode.FAILED_TO_SAVE_LOCAL_FILE);
  		}
  	}
  

  • AJAX를 통해 호출될 때, 사용자가 업로드한 MultipartFile 타입의 파일을 매개변수로 갖는다.
  • 저장하고자 하는 경로 (fullPath)에 예외처리에 해당되지 않을 경우(옳은 조건) transfer를 통해 저장한다.