다중 파일 업로드를 구현하면서 헤맨 기록
<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) {
...
}
}