Nuxt3 vue3 formData 다중 파일 업로드, 파라미터 전달

test.vue

const addFile = async () => {
    const formData = new FormData();

    for (var i = 0; i < multipleFile.value.length; i++) {
      formData.append('fileArray', multipleFile.value[i]); // 파일 객체
    }

    await useFetch('http://localhost:8080/file/add', {
    method: 'POST',
    body: formData,
    });
}

formData.append를 같은 이름으로 넘겨 주어야 합니다. 단일 파일의 경우 for문만 제거하면 됩니다.

const multipleFile = ref([]);

const multipleFileChange = (e) => {
  multipleFile.value = e.target.files;
}

multipleFile같은 경우에는 위 함수를 type="file"인 input에 @change를 사용하여 multipleFile이란 변수의 값을 지정합니다.

 

TestController.java

@PostMapping("/file/add")
public Map addFile(@RequestParam Map params, MultipartFile[] fileArray) throws Exception {
    return commonService.addFile(params, fileArray);
}

 

전체 로직

[Spring Boot] 단일, 다중 파일 업로드 로직 구현 feat.Nuxt3