문제

사진을 업로드하는 API를 제작하고 테스트를 하는 도중, 프론트에서 axios로 전송된 데이터를 스프링이 인식하지 못하는 문제점이 생겼다.

나는 위의 사진과 같이 사진의 카테고리 이름 한개와, 여러개의 FileDTO를 받고싶었다.

FileDTO는 위의 사진과 같이 이미지 데이터와 그 이미지에 대한 comment를 포함한 데이터의 틀이다.

여러개의 파일을 전송하기 위해서 나는 다음과 같이 하면 될 줄 알았다.

하지만 이런식으로 데이터를 보내는 것은 스프링이 지원하지 않는것 같다.

검색을 이래저래 하다보니 해결책을 하나 찾았다.

해결

해결 방법은 다음과 같이 단일 DTO형태로 받고, DTO안에 해당 형태의 List를 추가하는 것이다.

이렇게 바꿔준 후 프론트에서는 다음과 같이 데이터를 정제하여 전송한다.

설명을 하자면, 키값에 인덱스를 포함해서 데이터를 추가하는것이다.

fd.append("list[" + idx + "].file", imgFiles[i]);
여기서 list는 FileDTO에 추가한 리스트의 필드명이고, 인덱스는 몇번째 데이터인지를 뜻한다.
그리고 file은 FileDTO의 "file"이라는 필드로, idx번째의 파일이라는 의미다.

그러면
fd.append("list[" + idx + "].comment", "hi"); 는 idx번째 FileDTO의 comment는 "hi"라는 의미가 된다.

Front에서 뭔가 데이터를 정제하고 idx를 포함시켜야하는 작업이 깔끔하지 않다는 느낌을 주지만 다른 방법은 검색해도 보이지가 않는다. 좋은 방법이 있으면 좋겠다.