multer
- body-parser는 멀티파트 데이터를 처리하지 못함 → multer 사용
- 멀티파트 데이터 : 이미지, 동영상, 파일 등
- 파일 업로드를 위해 사용되는 미들웨어
- 파일 업로드는 POST 방식 이용
파일 업로드 순서
- 프론트
- input 태그 type="file"로 설정
- input의 name 속성 = 서버에서 파일을 인식할 이름
- 일반 form 전송이면 form 태그 or 동적 파일 업로드 선택
- form 태그 enctype="multipart/form-data" 설정
- 백
- multer 세부 설정 (경로, 파일 이름 등)
- req.file 객체 : 업로드된 파일
- req.body : 파일 외의 데이터 값들
- 업로드한 파일을 서버에서 띄울 때에는 app.js에 정적 파일 경로를 꼭 지정해주어야 함
하나의 파일 업로드
- single( ) : 하나의 파일 업로드할 때 사용
- req.file : 파일 하나
const multer = require("multer");
const upload = multer({
dest: "uploads/",
});
app.post("/upload", upload.single("input name 값"), function (req, res) {
...
});
- dest: 파일을 업로드하고 그 파일이 저장될 경로를 지정
- 콜백 함수 (function (req, res)) 는 맨 마지막에 명시해야 하므로 upload.single을 먼저 적음
- single( )을 실행하면, uploads/ 폴더가 새롭게 생성됨
multer 세부 설정
const uploadDetail = multer({
storage: multer.diskStorage({
destination(req, file, done) {
done(null, "uploads/");
},
filename(req, file, done) {
const ext = path.extname(file.originalname);
done(null, path.basename(file.originalname, ext) + Date.now() + ext);
},
}),
limites: {fileSize: 5 * 1024 * 1024},
});
app.post("/upload", uploadDetail.single("input name 값"), function (req, res) {
...
});
- storage : 저장할 공간에 대한 정보
- diskStorage : 파일을 디스크에 저장하기 위한 모든 제어 기능을 제공
- destination : 저장할 경로
- filename : 파일명
- limits : 파일 제한
파일 여러 개 업로드
- array( ) : 하나의 요청 안에 여러 개의 파일이 존재할 때 사용
- req.files : 파일 n개
app.post("/upload/array", uploadDetial.array("input name 값"), function (req, res) {
...
});
- fields( ) : 하나의 요청이 아닌 여러 개의 요청이 들어올 때 사용
- req.files : 파일 n개
app.post(
"/upload/fields",
uploadDetial.fields([{ name : "input name 값"}, { name : "input name 값" }]),
function (req, res) {
...
}
);
Axios 동적 파일 업로드
- 비동기적으로 파일 업로드 가능
- 파일을 업로드하여도 페이지가 새로고침되지 않음
function fileUpload() {
const formData = new FormData();
const file = document.getElementById("input id 값");
formData.append("input name 값", file.files[0]);
axios({
method: "POST",
url: "/dynamicFile",
data: formData,
headers: {
"Content-Type": "multipart/form-data",
},
}).then(function (res) {
...
});
}