Spring, Java, JavaScript (Jquery) Json, JsonList, File 한 번에 처리하는 방법(Multipart, Json, Ajax, formData)

JavaScript (Jquery) Json, JsonList, File 한 번에 처리하는 방법

업무 중 하나의 URL에서 Json, JsonList, file 데이터를 한번의 비동기 통신으로 처리해야 하는 경우가 있었습니다.

모든 데이터를 form으로 한 번에 묶어 처리 하였습니다.

let formData = new FormData();
let brandList = new Array();

// ex JsonList
$("input[name*='userBrandName']").each(function(){
    let brandName;
    if($(this).data('type') == "brand"){
        brandList.push({
            userBrandName : $(this).val(),
            userEmail : $("#userEmail").val()
        });
    }
});

// ex Json + JsonList
let jsonData = {
    userEmail : $("#userEmail").val(),
    userPassword : $("#userPassword").val(),
    userCorpNo : $("#userCorpNo").val(),
    userCorp : $("#userCorp").val(),
    brandList : brandList
};

// ex file + Json + JsonList
formData.append('bnumFile', $('#userCorpFile')[0].files[0]);
formData.append('param', new Blob([ JSON.stringify(jsonData) ], { type : "application/json" }));

// spring security
let token = $("meta[name='_csrf']").attr("th:content");
let header = $("meta[name='_csrf_header']").attr("th:content");

// spring-Security csrf ajax
$.ajax({
    url : '/url', // url
    type : "POST", // get / post
    async : true, // 비동기-t / 동기-f
    dataType : 'json',
    enctype : 'multipart/form-data',
    processData : false,
    contentType : false,
    data : formData,
    beforeSend: function(xhr) { // 전송 전
        xhr.setRequestHeader(header, token);
    }
}).done(function(response) { // 성공

}).fail(function(error) { // 실패

});

 

Controller 처리

Controller 처리는 아래와 같습니다.

@RequestMapping(value="/url", method=RequestMethod.POST)
@ResponseBody
public String join(@RequestPart(value = "param") AuthUserDTO authUserDTO
                 , @RequestPart(value = "bnumFile") MultipartFile file) throws Exception {
    System.out.println("getUserEmail => " + authUserDTO.getUserEmail());
    System.out.println("getUserPassword => " + authUserDTO.getUserPassword());
    System.out.println("getUserCorpNo => " + authUserDTO.getUserCorpNo());
    System.out.println("getUserCorp => " + authUserDTO.getUserCorp());
    System.out.println("파일 : " + file.getBytes());

    for(UserBrandDTO dto : authUserDTO.getBrandList()){
        System.out.println("email, brand" + dto.getUserEmail() + " " + dto.getUserBrandName());
    }

    return "";
}

Json 데이터는 param 매개변수 입니다.

File 데이터는 bnumFile 매개변수로 데이터를 확인 할 수 있습니다. (form append)

단, 어노테이션은 @RequestPart를 이용해야 합니다.

 

결과

테스트 결과 로그