출처1 : https://blogs.perficient.com/2020/07/27/requestbody-and-multipart-on-spring-boot/

출처2 : https://github.com/PraseelaRadhakrishnan/Spring-Boot/tree/master/Spring-Boot-Upload

model

@Getter
@Setter
public class BoardHierarchyDto {
    private byte[] id;
    private String eventId;
    private String title;
    private String body;
    private String writer;
    private List<MultipartFile> file;
    private List<BoardHierarchyDto> child;
}

controller

@PostMapping(value = "")
public ResponseEntity multipleFileSave(@ModelAttribute  BoardHierarchyDto board) {
    ResponseEntity responseEntity = null;
    try {
        // 파일 및 데이터 처리

        SingleDataResponse<?> response = responseService.getSingleDataResponse(true, "저장 성공", board);
        responseEntity = ResponseEntity.status(HttpStatus.CREATED).body(response);
    } catch (Exception exception) {
        log.debug(exception.getMessage());
        BaseResponse response = responseService.getBaseResponse(false, exception.getMessage());
        responseEntity = ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);
    }

    return responseEntity;
}

postman

html1

function writeBoard() {
    var data = new FormData($("#writeForm")[0]);

    $.ajax({
        url: 'http://localhost:8080/api/v1/board',
        data: data,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (jqXHR) {
            alert('작성 완료.')
        },
        error: function (jqXHR, status, error) {
            alert('오류가 발생했습니다.')
        },
        complete: function (jqXHR) {
            if (jqXHR) {
                const result = JSON.parse(jqXHR.responseText)
                $("#divWrite").val(JSON.stringify(result, null, 4))
            }
        }

    });
}

html2

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="/common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        function writeBoard() {
            var fd = new FormData();
            fd.append('title', "타이틀")
            fd.append('body', "바디")
            var files = $("#file").prop("files")
            for (var i = 0; i < files.length; i++) {
                fd.append("file", files[i])
            }

            fd.append('child[0].title', "자식 타이틀")
            fd.append('child[0].body', "자식 바디")
            var files = $("#fileChild1").prop("files")
            for (var i = 0; i < files.length; i++) {
                fd.append("child[0].file", files[i])
            }


            $.ajax({
                url: 'http://localhost:8080/api/v1/_test',
                data: fd,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (jqXHR) {
                    alert('작성 완료.')
                },
                error: function (jqXHR, status, error) {
                    alert('오류가 발생했습니다.')
                },
                complete: function (jqXHR) {
                    if (jqXHR) {
                        const result = JSON.parse(jqXHR.responseText)
                        $("#divWrite").val(JSON.stringify(result, null, 4))
                    }
                }

            });
        }

    </script>
</head>
<body>
<h1><a href="/board.html"> Board Sample</a></h1>

<div class="card">
    <h2>write test</h2>
    <div>
        <h5>root file</h5>
        <input id="file" name="file" type="file" multiple style="width:200px; margin:0 20px;"/>
        <h5>child[0] file</h5>
        <input id="fileChild1" name="file" type="file" multiple style="width:200px; margin:0 20px;"/>
        <br>
        <button onclick="writeBoard()">write</button>
    </div>
</div>

</body>
</html>

Controller

아래와 같이 postMapping에 consumes설정을 두 개를 포함한다.

추가적으로 @RequestPart를 나누어서 설정한다.

@PreAuthorize("hasRole('ROLE_USER')")
@PostMapping(value = "", consumes = {MediaType.APPLICATION_JSON_VALUE, MediaType.MULTIPART_FORM_DATA_VALUE})
public ResponseEntity save(final Authentication authentication, @RequestPart("board") String board, @RequestPart(value = "file", required = false) List<MultipartFile> files) {
    ResponseEntity responseEntity = null;
    try {

        BoardDto boardDto = boardService.getJson(board);

getJson 함수

위 controller에서 받게되는 board는 String 형식이므로 이걸 class로 변환한다.

public BoardDto getJson(String boardDto) {
    BoardDto boardJson = new BoardDto();
    try {
        ObjectMapper objectMapper = new ObjectMapper();
        boardJson = objectMapper.readValue(boardDto, BoardDto.class);
    } catch (IOException err) {
        System.out.printf("Error", err.toString());
    }
    return boardJson;
}

PostMan 테스트

post로 호출시에 아래와 같이 form-data 형식으로 호출을 하고

추가적으로 board는 json 형식의 문자열로 호출하면 Controller에서 정상적으로 수신할 수 있다.

html

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        const eventId = "53856DFBC99B4E4A81BB14A95DC0A60A"

        $(function () {
            $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                options.beforeSend = function (xhr) {
                    xhr.setRequestHeader('Authorization', "Bearer " + localStorage.getItem('AuthorizationToken'))
                }
            });
        });

        function getFormData($form) {
            var unindexed_array = $form.serializeArray();
            var indexed_array = {};

            $.map(unindexed_array, function (n, i) {
                indexed_array[n['name']] = n['value']
            })

            return indexed_array;
        }

        function writeBoard() {
            var $form = $("#writeForm");
            var BoardDto = getFormData($form);

            var fd = new FormData();
            fd.append('board', JSON.stringify(BoardDto))

            var files = $("#file").prop("files")
            for (var i = 0; i < files.length; i++) {
                fd.append("file", files[i])
            }


            $.ajax({
                url: 'http://localhost:8080/api/v1/board',
                data: fd,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (jqXHR) {
                    alert('작성 완료.')
                },
                error: function (jqXHR, status, error) {
                    alert('오류가 발생했습니다.')
                },
                complete: function (jqXHR) {
                    if (jqXHR) {
                        const result = JSON.parse(jqXHR.responseText)
                        $("#divWrite").val(JSON.stringify(result, null, 4))
                    }
                }

            });
        }

    </script>
</head>
<body>
<h1><a href="/board.html"> Board Sample</a></h1>

<div class="card">
    <h2>write test</h2>
    <div>
        <form id="writeForm" onsubmit='return false'>
            <h5>Job</h5>
            <input id="title" name="title" style="width:200px; margin:0 20px;"/>

            <h5>Body</h5>
            <textarea id="body" name="body" rows="10" style="margin:0 20px;width: 70%"></textarea>

            <h5>file</h5>
            <input id="file" name="file" type="file" multiple style="width:200px; margin:0 20px;"/>

            <button onclick="writeBoard()">write</button>
        </form>
        <h5>result</h5>
        <textarea id="divWrite" rows="10" style="margin:0 20px;width: 70%">
        </textarea>

    </div>
</div>

</body>
</html>

[Spring Boot] json 객체와 파일을 한 번에 받기 RequestBody And Multipart(file)