[Express] 파일 업로드

파일과 multipart/form-data

• 각각의 데이터 타입 그대로 전송됨 | 파일의 경우, 별도의 변환 과정을 거치지 않기에 파일 전송에 주로 사용
• 웹 페이지에서 폼을 만들 때, multipart/form-data를 설정해 놓으면 브라우저에서 알아서 처리
• 참고문헌: https://developer.mozilla.org/ko/docs/Web/HTTP/MIME_types#multipartform-data

MIME 타입 (IANA 미디어 타입) - HTTP | MDN

 

multer 미들웨어 사용하기

• 공식문서: https://github.com/expressjs/multer/blob/master/doc/README-ko.md

npm install multer

import multer from 'multer';

const upload = multer({ dest: 'uploads/'});

// 하나의 파일을 attachment로 받음
app.post('/files', upload.single('attachment'), (req, res) => {
  console.log(req.file);
  res.json({ message: '파일 업로드 완료!' });
});

 

서버의 파일 제공하기

// app.js
// uploads 폴더에 저장된 각각의 파일에 접근 가능
app.use(express.static('uploads'));

// 파일 경로 추가 가능
app.use('/files', express.static('uploads'));
// 접근시 http://localhost:3000/files/파일명 으로 접근

// 파일에 접근 가능한 경로를 리스폰스로 받기
app.post('/files', upload.single('attachment'), (req, res) => {
  const path = `/files/${req.file.filename}`;
  console.log(req.file);
  res.json({ path });
});

POST GET

 

multer 라이브러리에서 multer 인스턴스 생성

• multer S3 공식문서: https://github.com/anacronw/multer-s3

>> npm install --save multer-s3

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