Spring multiple 파일 업로드

다중 파일 업로드를 구현하면서 헤맨 기록

 

<input type="file" multiple id="files">

<script>

    let formData = new FormData();
    formData.append(document.querySelector('#files').files);
    
    ...

</script>

이렇게 FormData를 만들어서 보내면 [Object object] 문자열만 전송된다.

document.querytSelector('#files').files 는 단순 File 객체가 담긴 배열이 아닌, FileList를 반환한다.

 

해결법

<script>
    let formData = new FromData();
    for(let file of document.querySelector('#files').files) {
    	formData.append('files', file);
    }

    ...
    
</script>

FormData에 File객체를 계속해서 append시키면 정상 작동한다.

이렇게 동일한 key로 append하면 단순 Array 로 넘어가서 되는 것 같다.

 

@Controller
public class FileController {

    @RequestMapping("/uploadFile")
    public void uploadFile(@RequestPart List<MultipartFile> files) {
    	...
    }
    
}