[FE] 한 번의 post 요청으로 미디어 파일, JS 객체 전송하기

🎃 상황

게시글 작성 기능을 만드는 도중 작성한 게시글에 대한 기본적인 정보(게시글 내용, 작성일자, 작성자 등)와 첨부된 사진파일을 post요청을 통해 전송해야했고, 두 번에 걸쳐 따로 보낼 수 있었으나 이는 비효율적이라 생각해 개선 필요성을 느낌

 

🎀 로직

- 게시글 정보를 담고 있는 객체 data와 첨부파일 정보를 담고 있는 배열 files를 하나의 FormData에 담아 백엔드단에 전송

- FormData에 객체 정보를 담기 위해 객체를 Blob의 형태로 변환

 

🎨 코드

// 새로운 FormData 생성
const formData = new FormData();

// 첨부파일 정보를 'files' 라는 이름으로 FormData에 저장
// (files: 첨부파일 정보를 담고 있는 배열)
for (let i = 0; i < files.length; i++) {
    formData.append("files", files[i]);
}

// data: 게시글 정보를 담고 있는 객체
const data = {
    memberIndex: writerIndex,
    boardContent: contents,
    boardInputDate: dateRef.current.innerText,
    mediaContent: [],
    boardLocation: curPage * MAX_STAR_CNT + location,
    boardAccess: accessRange,
    boardDeleteYN: "N",
    hashContent: hashContent,
};

// data 객체를 Blob 형태로 변환
// 객체를 JSON으로 변환 후, Blob의 타입을 'application/json' 으로 명시
const dataDto = JSON.stringify(data);
let requestDtoBlob = new Blob([dataDto], {
    type: "application/json",
});

// 변환된 Blob을 'requestDto'라는 이름으로 FormData에 저장
formData.append("requestDto", requestDtoBlob);

// post 요청
// axios.post 메서드의 data 파라미터에 생성해둔 formData를 넣어 전송
// 요청 header에 FormData를 전송할 것임을 명시
const response = await axios.post(
    `${process.env.REACT_APP_API_URL}/board`,
    formData,
    {
        header: {
            "Content-Type": "multipart/form-data",
        },
    }
);

- 백엔드단에서는 위와 같이 requestDto, files 라는 이름으로 파라미터를 전달받아 처리