Ajax를 통해 파일과 Json 업로드 후 Controller로 받기

항상 Ajax를 통해 정보를 전송할 때 json만 전송하다 보니 파일과 함께 어떻게 보내는지 삽질을 좀 했다

하지만 늘 그랬듯이 삽질을 하고 내용을 정리하니 이게 이렇게 긴 시간을 잡아먹었어야 했는가 싶다

---

🟧 Ajax & Spring boot Controller

⏹️ Ajax

const pdfFile = $("#pdfFile")[0].files[0];
const jsonFile = $("#jsonFile")[0].files[0];

const formData = new FormData();
formData.append("files", pdfFile);
formData.append("files", jsonFile);
formData.append("json", new Blob([JSON.stringify(data)], {type: "application/json"}));

$.ajax({
    url: "등록 컨트롤러 URL",
    method: "post",
    data: formData,
    contentType: false,
    processData: false,
    enctype: "multipart/form-data",
    success: function(result) {
        alert("등록 성공");
        location.reload();
    },
    error: function(xhr) {
        console.log(xhr);
    }
});

 

따로 준비해둔 Data는 위와 같이 만들면 컨트롤러에서 Map<String, Object> 혹은 DTO, VO로 전달받을 수 있다

 

⏹️ Controller

@ResponseBody
@PostMapping("URL")
public void postCreateDoc(@RequestPart Map<String, Object> json, 
            @RequestPart MultipartFile[] files) {
    // 컨트롤러 로직 작성
}

위와 같이 컨트롤러를 작성해주는데 json이나 files 같이 인자의 이름은 Ajax에서 전달하는 formData의 이름과

맞춰야 한다.

---

지금와서 생각하니 너무 간단하다..