formData로 Multipart file 전송 시 오류가 발생합니다.

Question

백엔드는 Spring boot를 사용하고 있고, 프론트는 React.js를 사용해서 formData에 file을 append()해서 전송시키려하고 있습니다.Spring boot쪽은 PostMan으로 정상적으로 파일이 잘 저장되는 것을 확인했습니다.하지만 이를 프론트 단에서 formData에 파일을 붙여 전송하면 에러가 발생합니다. 에러는 아래와 같습니다. .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present] React.js 부분입니다. onChange=({ fileList })=> { this.setState({ fileList }, function(){ console.log(this.state.fileList[0].originFileObj) }) } uploadNewWebtoon() { try { uploadFile(this.state.fileList[0].originFileObj) } catch(error) { notification.error({ message: 'Cheeze Toon', description: error.message || '다시 시도해주세요.' }); } } render() { return (

); } } ant Design 이라는 React UI Library를 사용하고 있기 때문에 공식문서를 따라event.target.files[0]과 같은 의미로 this.state.fileList[0].originFileObj를 사용했습니다.filsList[0]의 originFileObj는 아래와 같이 구성되어 있습니다. formData를 생성해 append()로 파일을 붙힌 후 fetch 로 전송하는 부분입니다. import { API_BASE_URL, ACCESS_TOKEN} from '../constants'; const request = (options) => { const headers = new Headers() if(localStorage.getItem(ACCESS_TOKEN)) { headers.append('Authorization', 'Bearer ' + localStorage.getItem(ACCESS_TOKEN)) } const defaults = {headers: headers}; options = Object.assign({}, defaults, options); return fetch(options.url, options) .then(response => response.json().then(json => { if(!response.ok) { return Promise.reject(json); } return json; }) ); }; export function uploadFile(fileList) { const formData = new FormData(); formData.append('fileList', fileList); return request({ url:API_BASE_URL + "/newToonSave", method: 'POST', body : formData }) } 로그인 기능때문에 JWT TOKEN을 헤더에 포함하고 있습니다. stackOverFlow에 검색해보니 append value 뒤에 option(fileName = fileList.name...등)을 붙여보라 해서 시도해봤으나 결과는 같았습니다. spring boot controller 부분입니다. @RestController @RequestMapping("/api") public class ToonController { private static final Logger logger = LoggerFactory.getLogger(ToonController.class); @Autowired private ToonStorageService toonStorageService; @PostMapping(value = "/newToonSave", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE}) @PreAuthorize("hasRole('ADMIN')") public ToonStorage uploadFile(@RequestParam("file") MultipartFile file) { ToonStorage toonStorage = toonStorageService.storeFile(file); return toonStorage; } } 전혀 안되는 이유를 모르겠습니다... spring boot에 file upload와 관련된 라이브러리가 필요한 건가 싶어서pom.xml에 dependency를 추가하고 Application.java에 @Bean 도 추가했습니다.하지만 동일한 오류가 발생합니다. ㅠㅠ commons-fileupload commons-fileupload 1.2.2 commons-io commons-io 2.4 @SpringBootApplication //자동 convert @EntityScan(basePackageClasses = {DemoApplication.class, Jsr310JpaConverters.class}) @EnableConfigurationProperties({ FileStorageProperties.class }) public class DemoApplication { @PostConstruct void init(){ TimeZone.setDefault(TimeZone.getTimeZone("UTC")); } public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } @Bean public MultipartConfigElement multipartConfigElement() { MultipartConfigFactory factory = new MultipartConfigFactory(); return factory.createMultipartConfig(); } @Bean public MultipartResolver multipartResolver() { org.springframework.web.multipart.commons.CommonsMultipartResolver multipartResolver = new org.springframework.web.multipart.commons.CommonsMultipartResolver(); multipartResolver.setMaxUploadSize(512000000); return multipartResolver; } } 혹시 몰라 진행중인 github 링크도 첨부합니다.https://github.com/doozi316/React-Spring-Cheezetoon 나흘째 삽질 중입니다.포트폴리오 프로젝트인데, 너무 진도가 안나가서 파일 첨부부분만 버리고 새로 갈아엎을까도생각중입니다 ㅠㅠ꼭해결하고 싶습니다.도움 주신다면 정말 정말 감사드리겠습니다..!

aksjm2 · Accepted Answer

&#64;requestParam(&#34;file&#34;) -> formData.append('fileList', fileList);formData.append(&#34;file&#34;, fileList); MultipartFile file -> ? list 형태나, Array로 받으셔야 할 것 같아보이네요. 파일 하나만 단일로 올라가는것이라면.formData.append(&#34;file&#34;, fileList[0]);controller 단은 그대로 두셔도 될것 같네요.

doozi · Answer

&#64;aksjm2 감사합니다 ㅠㅠ 바보같은 실수를 하고 있었네요 ㅠㅠ 덕분에 해결했어요 복받으실거에요!!!!

formData로 Multipart file 전송 시 오류가 발생합니다.

2개의 답변

#multipart 목록