정중식의 개발공부로그
nodejs 파일 업로드 - multer 모듈
23 Jul 2020 | nodejsnodejs 파일 업로드 - multer 모듈
multer이란?
multer은 한국번역이 잘 되어있으니 한번 살펴보시기바랍니다.자료
하지만 제가 듣고있는 강의의 강사는,자료에 나와있는 내용은 반토막 설명이라고합니다. 어떻게 접근하는지 더 자세히 알고싶으시면 console.log찍어보면서 사용하시는걸 추천합니다.
-
multer란 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js 의 미들웨어이다.
-
Multer는 multipart (multipart/form-data)가 아닌 폼에서는 동작하지 않는다.
multer 기본 설명서
github multer에서 따온 코드를 토대로 간단히 설명합니다.
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/my-uploads');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now());
},
});
var upload = multer({ storage: storage });
-
destination: 어디에 파일이 저장되는지를 얘기해준다. 나는
루트디렉토리에 uploads폴더를 만들어이 안에 모든 이미지파일들이 들어가게 해줄것임 -
filename: uploads/폴더안에 파일이 저장될때 어떤 이름으로 저장될것인지 설정해준다.
multer 기본 예제
Front
const dropHandle = (files) => {
let formData = new FormData();
const config = {
header: { 'content-type': 'multipart/form-data' },
};
formData.append('file', files[0]);
axios.post('/api/product/image', formData, config).then((response) => {
if (response.data.success) {
// 작업 성공시 로직
console.log(response.data);
} else {
alert('파일을 저장하는데 실패했습니다.');
}
});
};
Server
- index.js
app.use('/api/product', require('./routes/product'));
- server>routes>product
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`);
},
});
var upload = multer({ storage: storage }).single('file');
router.post('/image', (req, res) => {
// 가져온 이미지를 저장해주면 됨
upload(req, res, (err) => {
if (err) {
return req.json({ success: false, err });
}
return res.json({
success: true,
filePath: res.req.file.path,
fileName: res.req.file.filename,
});
});
});
// filePath:res.req.file.path 어디에 파일이 저장되있는지 path(위치)를 가져올수있다.
// fileName: 저장된 파일의 이름을 가져올 수 있다.
module.exports = router;
이미지를 업로드해보자(기초)
이미지는 uploads폴더안에 저장된다.
파일 업로드 작업 마무리
업로드한 파일을 화면에 뿌려주는 작업입니다.
- 핵심은 useState와 mpa을통해 데이터를 뿌려주는것이 핵심이다.
Front
import React, { useState } from 'react';
import Dropzone from 'react-dropzone';
import { Icon } from 'antd';
import axios from 'axios';
const FileUpload = () => {
// 업로드할 이미지들을 담는 용도
const [Images, setImages] = useState([]);
const dropHandle = async (files) => {
let formData = new FormData();
const config = {
header: { 'content-type': 'multipart/form-data' },
};
formData.append('file', files[0]);
axios.post('/api/product/image', formData, config).then((response) => {
if (response.data.success) {
// console.log(response.data);
setImages([...Images, response.data.filePath]);
} else {
alert('파일을 저장하는데 실패했습니다.');
console.log(response.data.err);
}
});
};
return (
<div style=>
<Dropzone onDrop={dropHandle}>
{({ getRootProps, getInputProps }) => (
<div
style=
{...getRootProps()}
>
<input {...getInputProps()} />
<Icon type='plus' style= />
</div>
)}
</Dropzone>
{/* 이미지를 뿌려주는 UI */}
<div
style=
>
{Images.map((image, index) => (
<div key={index}>
<img
style=
src={`http://localhost:5000/${image}`}
/>
</div>
))}
</div>
</div>
);
};
export default FileUpload;
파일 업로드 작업 마무리 결과물
