react를 배우면서 겪은 내용들을 로깅해봅니다.

프론트는 React(with axios)로 작성하였고 백앤드는 node.js, express를 사용하여 API 서버로 구성하였습니다.

자세한 코드들은 생략합니다.

1. React 컴포넌트 작성

1.1 우선 React에서 ant design의 Dragger 컴포넌트를 작성합니다.

Dragger 컴포넌트(Upload 컴포넌트) 참고 : https://gary-shen.github.io/ant-design/components/upload/

const [fileList, setFileList] = useState([]);
const meta = {
	title: 'title 1',
  	contents: 'contents 1',
}

const handleUpload = () => {
	const formData = new FormData();
  	fileList.forEach(file => formData.append('files', file));
  	
  	// FormData의 append의 경우 value에 매개변수로 JSON Object를 받지 않음.
  	// JSON Object의 값들을 일일히 string으로 설정해주어야함.
  	// string 데이터 입력(metadata)
  	for(let key in meta) {
    	formData.append(key, meta[key]);
    }
  
  	axios.post('http://localhost:5000/api/board', formData, {
    	header: { 'Content-Type': 'multipart/form-data'}
    });
}

<Dragger
	name: 'files',
    multiple: true,
    action: 'http://localhost:5000/api/board/',
    beforeUpload: file => {
		setFileList(fileList.concat(file));
    	return false;	// 파일 선택시 바로 업로드 하지 않고 후에 한꺼번에 전송하기 위함
    },
    fileList,
>
<Button onClick={handleUpload}>Upload</Button>

2. node.js(express사용)에서 파일 및 데이터 받기

node.js와 express, routing, body-parser(url query 분석모듈) 설정이 되어 있다고 가정합니다.
FormData 전송시에 multer 모듈이 필요하여 아래의 명령어로 다운로드 합니다.

yarn add multer

다음과 같이 코드를 작성하여 파일과 데이터를 받을 수 있습니다.

const router = require('express').Router();
const multer = require('multer');

// 업로드된 파일을 "uploads/" 라는 폴더에 저장함.
// 해당 폴더가 없을 경우 에러 발생.
const storage = multer.diskStorage({
  	destination: function(req, res, callback) {
		callback(null, "uploads/");
    },
});

const upload = multer({
  storage: storage,
});

// 'files'는 프론트에서 보내온 file들이 저장된 formdata의 key입니다
router.post('/api/board', upload.array('files'));
router.post('/api/board', (req, res) => {
	const title = req.body.title;	// 프론트에서 설정한 'title' key의 value
	const contents = req.body.contents;	// 프론트에서 설정한 'contents' key의 value
  	const files = req.files;	// 받은 파일들의 객체 배열
	// do something...
});