[React & Express] 파일, 텍스트 데이터 한꺼번에 주고 받기

Postman으로 파일 데이터, 텍스트 데이터 한꺼번에 보내는 것은 간단하다. 그리고 이 데이터를 처리하는 것도 이전에 API 서버 구축할 때 이미 한번 구현해보았다. 하지만 React에서 데이터를 한꺼번에 보내는 방법은 몰랐고 Express에서의 데이터 처리 방식도 Postman과 약간 다르다.

React에서 파일, 텍스트 데이터 한꺼번에 서버로 보내는 방법과 Express에서 이를 처리하는 방법에 대해 정리해보았다.

React

---

1. 이미지, 파일과 같은 Blob 데이터를 전송할 때는 헤더에 'Content-Type': 'multipart/form-data'라고 명시해야 한다.

2. Blob 데이터를 전송할 때는 FormData안에 key-value꼴로 데이터를 넣어야 한다.

3. 객체를 FormData안에 넣을 때는 JSON.stringify로 객체를 JSON 문자열로 변환해야 한다.

// Axios 인스턴스
const instance = axios.create({
	baseURL: 'http://localhost/api',
	headers: { 'Content-Type': 'multipart/form-data' },
});

// API 호출 함수
const createPost = async (formData) => {
	return await instance.post('/post', formData);
};

// file에 파일 데이터가 저장되어있다고 가정한다
const formData = new FormData();
formData.append('files', file);

const postData = {
	text: "text data"
};
formData.append('data', JSON.stringify(postData));

const result = await createPost(formData)

Express

---

1. upload.array('files') 미들웨어를 지나면서 req.files에 파일 데이터가 담기고, req.body.data에 텍스트 데이터가 담긴다.

2. req.body.data는 JSON 문자열이므로 JSON.parse를 통해 다시 객체로 변환한다.

const createPost = async (req, res) => {
    // 파일 데이터를 가져온다.
    const files = req.files;
    // 텍스트 데이터를 가져온다.
    const data = JSON.parse(req.body.data);
    res.send('finish');
};
// multer 미들웨어
const upload = multer({dest: '/uploads'});

const router = Router();

router.post("/api/post", upload.array('files'), createPost);