[Spring Boot] HTTP FormData 다중 파일 전송

결과적으로 별거 아니었는데 방법을 몰라 오래 헤맸다.

나같은 사람을 위해

상황

• 클라이언트측에서 여러개의 파일을 서버로 전송해야 했고
• input | type=multiple 을 사용한게 아니여서 FileList 객체가 아닌 단일 객체 여러 개였다.
• 요청을 여러 번 보내고 싶지 않았고, 한번에 묶어 전송해야 했다.
• 파일 개수가 고정된 게 아니라서 서버 측에서 파라미터를 정해놓고 개별 파일을 받을 수 없었다.
  (배열 형태로 보내는게 필요했다)

FileList 요청 & 처리에 대한 해답은 많았는데, 상대적으로 나와 같은 상황에 대한 정보가 적어 찾느라 애먹었다.

해결

클라이언트

클라이언트측에서 제한되는 사항을 정리하면 아래와 같다.

1. FormData 내에 배열로 파일을 묶어 전달하면 정상적으로 처리할 수 없다.

const myForm = new FormData();
const myFiles = [파일 배열 ...]
myForm.append("files", myFiles);

이렇게 던지면 [Object Object] 문자열만 전송된다

2. **FileList 객체를 생성할 수 없다.

const myFileList = new FileList();
myFileList.add(myFile);

요런 식으로도 불가능하다. 브라우저가 제공하는 파일 선택 파인더 + <input> 의 multiple 옵션을 통해야만 FileList 를 생성할 수 있다. 보안상의 이유로.

결론은 동적으로 여러 파일을 form으로 보내야 할때는 같은 키로 append를 반복하면 된다.

const myForm = new FormData();
myFiles.forEach((myFile) => myForm.append("files", myFile));

같은 키로 append 여러 번 붙이는게 뭔가 이상하지만 결론적으로 우리가 원하는 배열 형태로 전송된다.

서버

여기서 타입 올바르게 설정하느라 많이 애먹었다.
결론만 말하면 위의 방식으로 보낸 요청은 아래와 같은 타입으로 처리하면 된다.

controller.java

@PostMapping
public void getRequestController(MultipartFile files[], HttpServletRequest request) throws Exception {}

당연히 form 에서 키를 files 로 보냈기 때문에 같은 이름으로 파라미터명을 설정한다.