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

Restful 한 방법을 지키기 위해, 게시글 수정 하던 중,

Put Method로 formdata에 file 데이터를 날려 보내는데, PUT에서 Formdata를 받지 못한다..

 

여러 시행 착오중, @requestpart 로 받으면, put에서도 formdata를 받을 수 있는것을 확인했다.

하지만, dto로 매핑은 되지않고 하나씩만 받아와짐..ㅠ

 

그래서 Form data에 file 데이터와 Json 데이터를 key라는 이름으로 보내서 dto에 매핑

 

Ajax

function update_post() {
    if (confirm("수정 하시겠습니까?") == false) {
        $('#modalClose').click();
    } else {
        let content = $('#update-content').val();
        let title = $('#update-title').val();
        let file = null;
        let fileInput = document.getElementsByClassName("upfile");

        if (fileInput.length > 0) {
            file = $('#upfile')[0].files[0]
        }

        var data = {
            title:title,
            content: content,
            idx: id
        };

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


        $.ajax({
            type: "PUT",
            url: `/posts/detail`,
            processData: false,
            contentType: false,
            data: formData,
            success: function (response) {
                window.location.reload();
            },
            error: function (request, status, error) {
                alert(error);
            }
        });
    }

}

 

Controller putmapping

//수정
    @PutMapping("/posts/detail")
    public void UpdatePost(@Valid @RequestPart(value = "key") PostRequestDto postrequestdto, @RequestPart(value = "img",required = false) MultipartFile img) throws IOException{
        System.out.println("-------------들어와아ㅏㅏㅏㅏㅏ");
        System.out.println(postrequestdto.getTitle());
        System.out.println(postrequestdto.getContent());
        System.out.println(postrequestdto.getImg());
        System.out.println(img);
        postrequestdto.setImg(img);

        postService.UpdatePost(postrequestdto);
    }

 

+

+

 

Post로 받으면 이런 복잡한 처리를 하지 않아도 됩니다.

그저 Restful 을 지키고 싶어서...

 

Spring이 버전업 됨에 따라, DTO에 Multipart 타입의 필드가 있으면, form 데이터는 특별한 어노테이션 없이

바로 dto로 받아도 된다고 합니다.

(이게 Post에서는 되는데 Put에서도 되는지 모르겠습니다... 안해봐서... 힘들어..)

 

Json 타입은 @requestbody로 받아야 합니다.

 

ex) Multipart

@Getter
@Setter
public class PostRequestDto {
    @NotBlank(message = "제목은 필수입니다.")
    private String title;
    @NotBlank(message = "내용은 필수입니다.")
    private String content;
    private MultipartFile img;
    private Long idx;
}

 

//수정
    @PutMapping("/posts/detail")
    public void UpdatePost(PostRequestDto postrequestdto) throws IOException{
        System.out.println("-------------들어와아ㅏㅏㅏㅏㅏ");
        System.out.println(postrequestdto.getTitle());
        System.out.println(postrequestdto.getContent());
        System.out.println(postrequestdto.getImg());
        System.out.println(img);
        postrequestdto.setImg(img);

        postService.UpdatePost(postrequestdto);
    }

 

 

할렐루야 이분이 절 구하셨습니다

formdata안에 json 넣기 : https://medium.com/jaehoon-techblog/simpleblog-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-4-55a8d2a8604

simpleBlog 개발 일지 (4)