vue3 composition-api axios insert 시 컨트롤러에 리스트 전달 방법

Question

안녕하세요 스프링 부트 &#43; vue3로 현재 개발 진행중입니다.현재 상황은 게시판을 등록하는데 게시글에 파일등록이 포함되어 한번에 컨트롤러에 전달하려고 하는데 에러가 발생합니다.코드는vueconst formData &#61; new FormData()formData.append(&#34;title&#34;, title.value)formData.append(&#34;description&#34;, description.value)formData.append(&#34;vo&#34; , vo.value)formData.append(&#34;file&#34;, file.value)axios.post(proxy.$serverUrl &#43; '/board', formData, { headers: {'Content-Type': 'multipart/form-data'}}).then((res) &#61;> { console.log(res)})여기서 vo에 list 값을 담아서 보내줘야 하는데 에러가 발생합니다 const vo &#61; ref([]) 로 선언해 주었고 console.log로 찍으면proxy(object) {title: .... , description : .... } 등 이렇게 잘 찍힙니다.이걸 컨트롤러에서는 &#64;PostMappingpublic void saveBoard(&#64;ModelAttribute BoardVo boardVo) {boardService.save(boardVo)}이렇게 해놓았고BoardVo 클래스에는private String title;private String description;private List<Vo> vo;private MultipartFile file;이렇게 되어 있는 상황입니다.에러는ailed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property 'vo' Cannot convert value of type 'java.lang.String' to required type 'com.test.board.model.Vo' for property 'vo[0]':이렇게 나오는데 구글링해도 닶이 나오지 않고 있습니다.무엇이 문제일까요?

Clickin · Answer

스프링에서 multipart는 List 필드가 바인딩되지 않습니다. setter로 직접 바인딩하기 때문에 그렇다고 합니다.https://www.inflearn.com/questions/1037487/multipart-form-data%EC%97%90%EC%84%9C-list-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 참조자료

vue3 composition-api axios insert 시 컨트롤러에 리스트 전달 방법

1개의 답변

#composition-api 목록