[ajax] ajax로 json과 file 동시에 전송하기

프로젝트에서 유저의 프로필을 바꾸는 기능을 구현 중,

프로필 사진과 비밀번호, 닉네임을 한 컨트롤러 내에서 바꾸고 싶어 방법을 찾아보았다.

 

원래 ajax를 두번 실행시켜 따로따로 하고 싶었지만,

repository에서 user의 변경사항을 두번 save하는 것은 낭비인 듯 싶어 한번에 처리하였다.

 

1. JavaScript

function editInfo() {

    let userId =  [[${userId}]];

    let requestData = {
        password : $("#password").val(),
        nickname : $("#nickname").val()
    }

    let formData = new FormData();
    formData.append("img", image);
    formData.append("request", new Blob([JSON.stringify(requestData)], {type: "application/json"}));

    $.ajax({
        type: "POST",
        url: '/users/mypage/'+userId+'/edit',
        data: formData,
        contentType: false, // 필수 : x-www-form-urlencoded로 파싱되는 것을 방지
        processData: false,  // 필수: contentType을 false로 줬을 때 QueryString 자동 설정됨. 해제
        success: function (message) {
            alert(message.split("*")[0])
            location.href = "/users"+message.split("*")[1]
        }
    });

}

정보 수정 버튼을 눌렀을 때 실행되는 함수이다.

여기서 image는 <input type = "file">에서 넘겨받은 image이며,

password와 nickname은 각각 <input type = "password"> <input type = "text"> 에서 넘겨받았다.

 

formData를 통해, key와 value를 매핑시켜 주었다.

password와 nickname은 json으로 묶어 한 key에 할당해 주었다.

 

<Reference>

https://thalals.tistory.com/232

Spring Putmapping Json 과 File 데이터 함께 전송하기(Form data)

https://cheonfamily.tistory.com/6

[spring] ajax 멀티파일(MultipartFile) 업로드 처리

 

2. Controller (SpringBoot)

@ResponseBody
@PostMapping("/{userId}/edit")
public String editInfo(@PathVariable Long userId, @RequestPart(value = "request") MyPageEditRequest req,
                       @RequestPart(value = "img",required = false) MultipartFile file, Principal principal) throws IOException {

    //principal 오류 (로그인 오류, 만료)
    try {
        userService.editUserInfo(req.getPassword(), req.getNickname(), file, principal.getName());
    } catch (AppException e) {
        if  (e.getErrorCode().equals(ErrorCode.FILE_UPLOAD_ERROR)) {
            return "파일 업로드 과정 중 오류가 발생했습니다. 다시 시도 해주세요.*/mypage/"+userId+"/edit";
        }
    } catch (Exception e) {
        return "로그인 정보가 유효하지 않습니다. 다시 로그인 해주세요.*/login";
    }

    return "변경이 완료되었습니다.*/mypage/"+userId;
}

 

@RequestPart : multipart/form-data에 특화된 annotation. 여러 복잡한 값을 처리할 때 유용하다 한다.

formData에서 key값을 value로 지정해 주어 해당 값을 불러왔다.

 

<Reference>

https://somuchthings.tistory.com/160?category=983431 

[Spring boot] @RequestParam vs @RequestPart

 

<전체 Reference>

https://thalals.tistory.com/232

https://cheonfamily.tistory.com/6

https://somuchthings.tistory.com/160?category=983431