자바스크립트(JavaScript) - 폼 데이터(FormData)에 객체 배열(파일 포함) 여러 개를 담아 컨트롤러로 전송하는 방법

다음과 같이 파일이 포함된 객체(JSON)를 자바스크립트 폼 데이터에 담아 컨트롤러로 전송해야 했었습니다.

서버로 전달할 객체 배열 구조

 

여러 가지 방법으로 시도해 보았지만 컨트롤러에서는 파라미터를 수집하지 못하는 상황이었고, 며칠을 헤매다 커뮤니티를 통해 방법을 찾게 되었습니다.

DTO 클래스 구조

 

앞의 BoardDTO 객체를 리스트로 전달받으려면 아래와 같이 임시 클래스를 하나 생성한 후 컨트롤러 메서드의 파라미터로 선언해 주면 됩니다.

임시 클래스 구조

 

객체 배열을 전달받을 컨트롤러 메서드 구조

 

프론트 단에서 JS 로직은 아래와 같은 형태로 처리되는데요.

JS 데이터 처리 로직

 

우선, 비어있는 FormData와 각 DTO를 담을 배열(boards), 그리고 각 DTO의 멤버를 저장할 리터럴 객체(data)를 선언합니다.

for 문의 inputs는 HTML form 태그의 모든 input 엘리먼트를 의미하고, name, value는 각 input 엘리먼트의 name과 value 값을 의미합니다.

80번 라인의 appendValue는 name이 "files"가 아니면 input의 value를 저장하고, name이 "files"라면 파일 객체를 저장합니다.

마지막 if 문에서는 name 값이 DTO 클래스의 마지막 멤버 변수인 content일 때, 앞에서 선언한 boards에 data(객체) 객체를 추가한 후 data를 초기화합니다.

이 과정을 통해 아래와 같이 데이터가 담기게 됩니다.

서버로 전달할 객체 배열 구조

 

마지막으로 Test 클래스의 멤버 변수인 boardList로 전송할 데이터를 formData에 추가합니다. 인덱스로 접근해야지만 컨트롤러에서 파라미터를 수집할 수 있었습니다.

주의해야 할 점으로는 contentType, processData는 무조건 false로 설정해 주셔야 한다는 점과, 파일 데이터는 객체(Object)이기 때문에, 컨트롤러에서 @RequestBody로 파라미터를 수집하는 메서드로는 파일 객체를 전송할 수 없다는 점을 꼭 기억해 주셔야 합니다.

파일 전송 Ajax 구조

 

---

주옥같은 정보를 제공해 주신 OKKY 커뮤니티의 한국은역시자바님께 진심으로 감사의 말씀을 드립니다.

---