React Ant design 파일 upload 에러

Question

React.js 에서 formData.append()로 다중 파일을 첨부하여 백엔드로 날리는 작업을 진행 중입니다.서버쪽은 postman으로 다중 파일을 잘 저장하는 걸 확인할 수 있었습니다.문제는 react 쪽입니다. 참고로 Ant Design 이라는 React UI Library를 사용 중입니다. 아래는 formData에 파일을 붙이는 소스코드입니다. 텍스트, 단일 파일, 다중 파일을 submit으로 한번에 보내려 합니다. const formData = new FormData(); formData.append('webtoonId', this.state.selectedToonId); formData.append('epiTitle', this.state.epiTitle); formData.append('eFile', this.state.thumbnail[0].originFileObj); for( let i = 0; i< this.state.mains.length ; i++){ formData.append('mFiles', this.state.mains[i].originFileObj); } uploadEpi(formData)uploadEpi()는 POST API 입니다. state는 아래와 같이 구성되어있습니다.this.state = { toons: [], epiTitle :'', thumbnail : [], mains : [], selectedToonID : '' } 이대로 전송시키면 텍스트와 단일 파일은 정상적으로 DB에 저장되지만 다중 파일만! 저장이 안됩니다... ㅠㅠ다중 파일을 담은 mains는 아래의 그림과 같이 구성됩니다. 아무런 에러도 뜨지않고, DB에 다중파일만 insert가 안됩니다. 추측으로는 제가 Ant Design 을 잘못사용하고 있어서 인 것 같습니다.(Ant Design 이라는 React UI library를 사용중입니다.https://ant.design/components/upload/) 여러 파일을 ctrl 로 선택해서 업로드가 되지 않길래,공식 문서를 보고 false} multiple={true}>multiple={true}를 지정해줬습니다.하지만 이를 정의해준 순간, 여러 파일이 선택은 되지만 submit 할때mains가 undefined로 전송되고 맙니다. onChange={this.onChangeMain}은 아래와 같습니다. onChangeMain=({ fileList })=> { this.setState({ mains : fileList }, function(){ console.log(this.state) }) } 결론은, React Ant Design의 (혹은 )을 통해다중 파일을 업로드 하는 법을 알고 싶다는 것입니다. ㅠㅠ 도저히 어느 부분이 잘못된건지 모르겠습니다. github도 첨부하겠습니다. https://github.com/doozi316/React-Spring-Cheezetoon/blob/master/frontend/src/admin/NewEpi.js 도움주신다면 정말 감사하겠습니다..!

React Ant design 파일 upload 에러

0개의 답변

#antd 목록