[Web_3] Spring 6 😗

08627·2022년 9월 21일

Spring

목록 보기

6/13

📌 Form Data 형식으로 첨부파일 전송하고 받아오기

👾 News : 기사와 첨부파일을 서버에 업로드하기

▫️ newsAjax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
       ... 
    </style>
</head>
<body>
    <div id="container">
        <form enctype="multipart/form-data">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">
                            <h1>뉴스정보</h1>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>
                            <label for="title">제목</label>
                        </th>
                        <td>
                            <input type="text" id="title" name="title">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="broadcasting-name">방송국명</label>
                        </th>
                        <td>
                            <input type="text" id="broadcasting-name" name="broadcastingName">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="broadcasting-name">첨부이미지</label>
                        </th>
                        <td>
                            <!-- 파일, 이미지 -->
                            <input type="file" name="files" accept="image/jpeg, image/png, image/jpg, image/gif" multiple>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            <label for="content">기사내용</label>
                        </th>
                        <td>
                            <textarea id="content" name="content"></textarea>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2">
                            <button type="button" class="write-button">작성하기</button>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </form>
        <div class="preview">

        </div>
    </div>

    <script>
    // '작성하기' 버튼 클릭 시 Ajax 로
    // 서버에 폼 데이터 형식으로 기사와 첨부파일을 함께 전송(request)함. 
      
        const writeButton = document.querySelector(".write-button");

        writeButton.onclick = () => {
            request();
        }

        function getFormData() {
            const form = document.querySelector("form");
            return new FormData(form);
        }

        function request() {
            $.ajax({
                async: false,
                type: "post",
                url: "/api/news", 
      
      			// form-data 전송 시 아래 3 설정을 해줘야 제대로 전송됨 ❗
                enctype: "multipart/form-data",
                contentType: false, 
                processData: false, 
      
                data: getFormData(),
                dataType: "json",
                success: (response) => {
                    console.log(response);
                    const preview = document.querySelector(".preview");

                    preview.innerHTML = `
                        <h2>제목: ${response.data.title}</h2>
                        <h2>방속국명: ${response.data.broadcastingName}</h2>
                        <h2>내용: ${response.data.content}</h2>
                        <h2>파일 리스트</h2>
                    `;

                    for(let i = 0; i < response.data.fileNames.length; i++) {
                        preview.innerHTML += `
                            <h3>${response.data.fileNames[i]}</h3>
                        `;
                    }
                },
                error: (error) => {
                    console.log(error);
                }
            })
        }
    </script>
</body>
</html>

<input> 태그의 name 으로 서버에서 폼 데이터를 참조할 때 사용할 이름을 지정해준다.
DTO의 필드명과 동일해야 DTO 객체에 요청 데이터를 담아올 수 있다.

▫️ AddNewsReqDto.java

@Data
public class AddNewsReqDto {
    private String title;
    private String broadcastingName;
    private List<MultipartFile> files;
    private String content;
}

▫️ NewsController

@Slf4j
@RestController
public class NewsController {
    @PostMapping("/api/news")
    public ResponseEntity<?> addNews(AddNewReqDto addNewReqDto){
		
        log.info("{}", addNewReqDto);
        
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("title", addNewReqDto.getTitle());
        map.put("broadcastingName", addNewReqDto.getBroadcastingName());
        map.put("content", addNewReqDto.getContent());

        List<String> fileNameList = new ArrayList<String>();
        addNewReqDto.getFiles().forEach((file) -> {
            fileNameList.add(file.getOriginalFilename());
        });
        map.put("fileNames", fileNameList);

        return ResponseEntity.ok(new CMRespDto<>(1, "뉴스 등록 완료", map));
    }
}

@RequestBody 어노테이션에 의해
map 으로 응답 데이터를 보내면 → JSON 객체로 보내짐.

📢 소감 😗

08627

이전 포스트

[Web_3] Spring 5 🐱‍🏍

다음 포스트

[Web_3] Spring 6 😗

Spring

👾 News : 기사와 첨부파일을 서버에 업로드하기

[Web_3] Spring 5 🐱‍🏍

[Web_3] Spring 7 😴

0개의 댓글