FormData에 하나의 이름에 multipartFile여러개를 추가하고 싶을 때

 

 

리액트와 스프링부트 프로젝트를 진행중에 List<multipartFile>를 보내고 싶은데, 

단순히 배열을 append하는 것으로는 진행이 되지 않았다. 

 

다음과 같이 이미지하나씩 모두 추가해주어야 전달이 된다. 

 

Frontend

const bodyFormData = new FormData()

images.forEach(image=> bodyFormData.append("multipartFile", image))
deletedImages.forEach(image=>bodyFormData.append("deletedImages",image))

위와 같이 모든 이미지에 대해서 foreach를 통해서 append해주어야만 multipartFile과 deletedImages에 각각의 이미지 리스트들이 잘 들어가게 된다. 

 

 

Backend

    @PostMapping("/product/save")
    public ProductListDTO saveProduct(@RequestParam(value = "multipartFile", required = false)List<MultipartFile> multipartFiles,
                                      @RequestParam(value = "deletedImages", required = false)List<String> deletedImages){
        ProductCreateDTO productCreateDTO = new ProductCreateDTO(id, name, description,brand,category,stock,price,userId);
        return productService.saveProduct(productCreateDTO, multipartFiles, deletedImages);
    }

받을때는 위와 같이 받아주면 List<MultipartFile>형식으로 잘 들어오는 것을 확인할 수 있다. 

 

 

 

(해답을 찾은 사이트)

https://stackoverflow.com/questions/35160483/empty-listmultipartfile-when-trying-to-upload-many-files-in-spring-with-ng-fil

Empty List when trying to upload many files in Spring with ng-file-upload