multer

body-parser로는 요청 본문을 해석할 수 없어서 multer라는 패키지가 필요.
이미지/동영상 파일 업로드를 도와줌

사용방법

const multer = require('multer');
const fs = require('fs');

try {
  fs.readdirSync('uploads');
} catch (error) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, 'uploads/'); // uploads/ 폴더에 저장하겠다
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/upload', (req, res) => {
  res.sendFile(path.join(__dirname, 'multipart.html'));
});

app.post('/upload', upload.single('image'), (req, res) => {
  console.log(req.file);
  res.send('ok');
});

single image

전체코드

client

multer.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>multer</title>
  </head>
  <body>
    multer
    <form id="form" action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="image" />
      <input type="file" name="image2" />
      <input type="text" name="title" />
      <button type="submit">업로드</button>
    </form>
  </body>
  <script>
    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();

      const formData = new FormData();
      formData.append('image', e.target.image.files[0]);
      formData.append('title', e.target.title.value);
      axios.post('/upload', formData);
    });
  </script>
  <script
    src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>"
    integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
</html>

backend

app.js

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');
const multer = require('multer');
const fs = require('fs');

dotenv.config();
const app = express();
app.set('port', process.env.PORT || 3000);

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(
  session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },
    name: 'session-cookie',
  })
);

// 서버 시작전에 uploads 폴더가 있는지 찾고, 없으면 만든다
try {
  fs.readdirSync('uploads');
} catch (error) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done(에러 처리, 저장할 곳)
      done(null, 'uploads/'); // uploads/ 폴더에 저장하겠다
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 확장자 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/upload', (req, res) => {
  res.sendFile(path.join(__dirname, 'multer.html'));
});

// upload.single() 파일 하나만을 처리하는 미들웨어 함수
// <input type="file" name="image" /> name="image"
app.post('/upload', upload.single('image'), (req, res) => {
  console.log('req.file>>', req.file);
  res.send('ok');
});

app.get(
  '/',
  (req, res, next) => {
    console.log('GET / 요청에서만 실행됩니다.');
    next();
  },
  (req, res) => {
    throw new Error('에러는 에러 처리 미들웨어로 갑니다.');
  }
);

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

// req.file>> {
//   fieldname: 'image',
//   originalname: '1123.png',
//   encoding: '7bit',
//   mimetype: 'image/png',
//   destination: 'uploads/',
//   filename: '11231680412337468.png',
//   path: 'uploads/11231680412337468.png',
//   size: 102443
// }

multiple images

multer.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>multer</title>
  </head>
  <body>
    multer
    <form id="form" action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="image" multiple />
      <input type="text" name="title" />
      <button type="submit">업로드</button>
    </form>
  </body>
  <script>
    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();

      const formData = new FormData();
      const imageFiles = e.target.images.files;
      for (let i = 0; i < imageFiles.length; i++) {
        formData.append('image', imageFiles[i]);
      }
      console.log('formData', formData);
      formData.append('title', e.target.title.value);

      axios.post('/upload', formData);
    });
  </script>
  <script
    src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>"
    integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
</html

app.js

주요 변경점
- upload.sinlge → **upload.array**
- req.file → **req.files**

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');
const multer = require('multer');
const fs = require('fs');

dotenv.config();
const app = express();
app.set('port', process.env.PORT || 3000);

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(
  session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },
    name: 'session-cookie',
  })
);

// 서버 시작전에 uploads 폴더가 있는지 찾고, 없으면 만든다
try {
  fs.readdirSync('uploads');
} catch (error) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done(에러 처리, 저장할 곳)
      done(null, 'uploads/'); // uploads/ 폴더에 저장하겠다
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 확장자 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/upload', (req, res) => {
  res.sendFile(path.join(__dirname, 'multer.html'));
});

// upload.single() 파일 하나만을 처리하는 미들웨어 함수
// <input type="file" name="image" /> name="image"
app.post('/upload', upload.array('image'), (req, res) => {
  console.log('req.file>>', req.files);
  res.send('ok');
});

app.get(
  '/',
  (req, res, next) => {
    console.log('GET / 요청에서만 실행됩니다.');
    next();
  },
  (req, res) => {
    throw new Error('에러는 에러 처리 미들웨어로 갑니다.');
  }
);

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

// req.file>> {
//   fieldname: 'image',
//   originalname: '1123.png',
//   encoding: '7bit',
//   mimetype: 'image/png',
//   destination: 'uploads/',
//   filename: '11231680412337468.png',
//   path: 'uploads/11231680412337468.png',
//   size: 102443
// }

multiple images 2

multer.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>multer</title>
  </head>
  <body>
    multer
    <form id="form" action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="image1" />
      <input type="file" name="image2" />
      <input type="file" name="image3" />
      <input type="text" name="title" />
      <button type="submit">업로드</button>
    </form>
  </body>
  <script>
    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const formData = new FormData();
      formData.append('image1', e.target.image1.files[0]);
      formData.append('image2', e.target.image2.files[0]);
      formData.append('image3', e.target.image3.files[0]);
      formData.append('title', e.target.title.value);

      axios.post('/upload', formData);
    });
  </script>
  <script
    src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>"
    integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
</html>

app.js

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');
const multer = require('multer');
const fs = require('fs');

dotenv.config();
const app = express();
app.set('port', process.env.PORT || 3000);

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(
  session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },
    name: 'session-cookie',
  })
);

// 서버 시작전에 uploads 폴더가 있는지 찾고, 없으면 만든다
try {
  fs.readdirSync('uploads');
} catch (error) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done(에러 처리, 저장할 곳)
      done(null, 'uploads/'); // uploads/ 폴더에 저장하겠다
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 확장자 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/upload', (req, res) => {
  res.sendFile(path.join(__dirname, 'multer.html'));
});

// upload.single() 파일 하나만을 처리하는 미들웨어 함수
// <input type="file" name="image" /> name="image"
app.post(
  '/upload',
  upload.fields(
    [{ name: 'image1', limits: 5 }, { name: 'image2' }, { name: 'image3' }],
    (req, res) => {
      // console.log('req.file>>', req.files.image1);
      // console.log('req.file>>', req.files.image2);
      // console.log('req.file>>', req.files.image3);
      res.send('ok');
    }
  )
);

app.get(
  '/',
  (req, res, next) => {
    console.log('GET / 요청에서만 실행됩니다.');
    next();
  },
  (req, res) => {
    throw new Error('에러는 에러 처리 미들웨어로 갑니다.');
  }
);

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

Previous미들웨어 확장 Nextrouter 분리 / 그룹화

Last updated 1 year ago

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>multer</title> </head> <body> multer <form id="form" action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" /> <input type="file" name="image2" /> <input type="text" name="title" /> <button type="submit">업로드</button> </form> </body> <script> document.getElementById('form').addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(); formData.append('image', e.target.image.files[0]); formData.append('title', e.target.title.value); axios.post('/upload', formData); }); </script> <script src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </html>

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>multer</title> </head> <body> multer <form id="form" action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" multiple /> <input type="text" name="title" /> <button type="submit">업로드</button> </form> </body> <script> document.getElementById('form').addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(); const imageFiles = e.target.images.files; for (let i = 0; i < imageFiles.length; i++) { formData.append('image', imageFiles[i]); } console.log('formData', formData); formData.append('title', e.target.title.value); axios.post('/upload', formData); }); </script> <script src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </html

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>multer</title> </head> <body> multer <form id="form" action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="image1" /> <input type="file" name="image2" /> <input type="file" name="image3" /> <input type="text" name="title" /> <button type="submit">업로드</button> </form> </body> <script> document.getElementById('form').addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(); formData.append('image1', e.target.image1.files[0]); formData.append('image2', e.target.image2.files[0]); formData.append('image3', e.target.image3.files[0]); formData.append('title', e.target.title.value); axios.post('/upload', formData); }); </script> <script src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js>" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </html>