다중 이미지 파일, 텍스트를 함께 Form Data에 넣어서 백엔드로 전송하는 방법을 기록하고자 한다.
const [content, setContent] = useState<string>("");
const [star, setStar] = useState<number>();
const [images, setImages] = useState<File[]>([]);
const formData = new FormData();
append
메서드를 이용해 데이터를 폼데이터 객체에 담아준다. application/json
로 명시하여 전송하지만, "multipart/form-data"
를 사용해서 보내야 하는 파일 데이터가 있기 때문에 JSON.stringify()
메소드를 통해 JSON 객체를 텍스트로 변환 후 new Blob()
을 통해 담아준다.new Blob([JSON.stringify(review)], { type: "application/json" }
let review = {
star: star,
content: content,
};
formData.append(
"review",
new Blob([JSON.stringify(review)], { type: "application/json" })
);
images.forEach((image) => {
if (image instanceof File && image.size > 0) {
formData.append("image", image);
}
});
multipart/form-data
로 지정해야 한다. try {
const response = await axios
.post(`${백엔드 주소}/api/review`, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
console.log(response.data, "리뷰 작성 성공!");
});
} catch (error) {
console.log(error);
}