Vue + 스프링부트 폼 데이터로 파일 받기

@RequestParam(value = "image", required = false) List<MultipartFile> images

 

POST에서의 기본적으로 파일을 받는 어노테이션이다.

하나의 파일을 받아도 어차피 리스트에 하나의 값으로 들어가기 때문에 리스트로 받는 것이 나중에 여러 파일을 바꿀 경우가 생겨도 쉽게 수정할 수 있다.

나의 경우도 하나의 파일만 받지만 리스트로 동작하게 하였다.

 

public ResponseEntity<Map<String,Object>> addProduct(
        @ModelAttribute AddProductDTO productDTO,
        @RequestParam(value = "image", required = false) List<MultipartFile> images
) throws IOException {
    // 경로에 파일만 저장함
    Map<String,Object> response = new HashMap<>();
    System.out.println(productDTO);
    List<FileDTO> productImage = fileService.saveFile(images);
    System.out.println(productImage);

    productService.insertProduct(productDTO,productImage);
    try{

    }
    catch (Exception e){

    }
    return null;
}

 

전체적인 틀 구조이다. 현재는 경로에 파일 저장하는 서비스만 작성하였고 DB에 저장 및 프론트에 보낼 리스폰스와 예외 처리는 하지 않았다. 

프론트에서 폼 데이터로 이미지 파일을 보내면 서버에서 받아서 확인할 수 있다.

newMenu.value = {
  name: "",
  price: "",
  description: "",
  categoryId: "",
  options: [],
  images: null,
};

 

보낼 값 선언

const formData = new FormData();
productData.options.forEach((option, index) => {
  formData.append(`options[${index}].name`, option.name);
  formData.append(`options[${index}].addPrice`, Number(option.addPrice));// ✅ 필드명 `addPrice` 확인
});

formData.append("name", productData.name);
formData.append("price", productData.price);
formData.append("description", productData.description);
formData.append("categoryId", productData.categoryId);

if (productData.image) {
  formData.append("images", productData.image);
}

폼 데이터

const response = await axios.post("/addProducts", formData, {
  headers: { "Content-Type": "multipart/form-data" },
});

 

통신

 

다음과 같은 형태로 통신을 하고 파일을 보내기 때문에 JSON이 아닌 멀티파트로 콘텐트 타입을 지정하였다.

 

그 외 추가적으로 파일과 관련된 프로퍼티를 설정할 수 있다.

아래와 같은 설정 그 외 설정도 찾아보면 더 있을 것이다.

spring.servlet.multipart.max-file-size=50MB
spring.servlet.multipart.max-request-size=100MB
spring.servlet.multipart.enabled=true

 

그리고 파일 경로 설정은 파일 서비스 부분에서 다음과 같이 설정할 수 있다.

String path = "경로" + originalName;

 

위 경로를 통해 다음과 같이 메소드를 사용하면 파일이 저장 된다.

File saveFile = new File(path);
file.transferTo(saveFile);