[Node.js/React/multer] multer로 파일 업로드 기능 만들기

웹 파일 매니저를 구현중이다.

 

우선 프론트를 구성한다.

 

나는 react-dropzone을 이용하여 프론트를 만들었다.

npm install react-dropzone

const Workspace = () => {
	const {getInputProps, open, acceptedFiles} = useDropzone({noDrag: true});
	
	const [files, setFiles] = useState(null);
	const config = {
		headers: {'content-type' : 'multipart/formdata'}
	};
	useEffect(() => {
		console.log(acceptedFiles);
		const datas = acceptedFiles.map(file => {
			let formdata = new FormData;
			formdata.append("file", file);
			console.log(file);
			axios
				.post('/api/file/upload', formdata, config)
				.then( res  => {
					console.log(res);
					setFiles(datas);
				})
				.catch(err => {
					console.log(err);
				});
			return(
			<li key={file.path}>
			  {file.path} - {file.size} bytes
			</li>
  		)});
	}, [acceptedFiles])
	return(
		<div>
			<Header />
			<div className={style.workBody}>
				<div>
					<input {...getInputProps()} type="file" />
					<button type="button" class="btn btn-outline-primary" onClick={open}>Upload</button>
				 </div>
				  <aside>
					<h4>Files</h4>
					<ul>{files}</ul>
				  </aside>
			</div>
			<Chat />
		</div>
)};

useEffect를 사용하지 않으면 dropzone을 클릭할때마다 api 요청이 실행된다.

multer는 form data로 multipart/formdata만 받는다고 함. 그래서 그렇게 보내도록 설정했다.

이제 업로드하는 api를 만들어야한다.

 

https://github.com/expressjs/multer/blob/master/doc/README-ko.md

GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

multer의 공식 문서 참고

 

npm install --save multer

먼저 multer를 깔고 위에 프론트에서 적은 POST api/file/upload를 채워주자.

const multer = require('multer');

let storage = multer.diskStorage({
	destination: (req, file, cb) => {
		cb(null, __dirname+"/uploads/");
	},
	filename: (req, file, cb) => {
		cb(null, `${file.originalname}`);
	}
});

const upload = multer({ storage: storage }).any();

router.post('/upload', async (req, res, next) => {
	upload(req, res, err => {
		if(err) return res.json({ success: false, err })
		return res.json({ success: true })
	})
});

이 파일이 있는 폴더 내의 uploads 라는 폴더 내에 내가 업로드한 파일이 저장된다.