7. 익스프레스 (1) - 미들웨어 [10] : multer 4

 

 

 

 

마지막으로 특수한 경우를  살펴보겠습니다. 바ㅍ로, 파일을 업로드하지 않고도 멀티 파트 형식으로 업로드하는 경우입니다. 이럴 때는 none 미들웨어를 사용하게 됩니다. 

 

 

[multipart.html]

 

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
    <input type="text" name="title" />
    <button type="submit">업로드</button>
</form>

 

 

 

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

 

 

사실 이 경우는 파일을 업로드하지 않았으므로 req.body만 존재하게 됩니다. 

 

 

 

---

 

 

지금까지 파일 업로드 타입에 따라서 미들웨어가 달라지는 경우를 하나씩 살펴보았는데, 요약하면 다음과 같습니다. 

 

(1) multer → single : 이미지 하나는 req.file로 / 나머지 정보는 req.body로

(2) multer → array or fields : 이미지들은 req.files로 / 나머지 정보는 req.body로

(3) multer → none : 모든 정보를 req.body로

 

 

 

---

 

 

그럼 실제로 작동하는 multer 페이지를 완성해 보겠습니다. 지금까지 작성해왔던 [app.js]를 활용해서 구현해 보도록 하겠습니다. 

 

[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');

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',
}));

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/');
        },
        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},
});

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');
});

/*
app.use((req, res, next) => {
    console.log('모든 요청에 실행됨');
    next();
});
*/

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'), '번 포트에서 대기');
});
/*
app.use(
    morgan('dev'),
    express.static('/', path.join(__dirname, 'public')),
    expresss.json(),
    express.urlencoded({ extended: false}),
    cookieParser(process.env.COOKIE_SECRET),
);

app.use((req, res, next) => {
    if(process.env.NODE_ENV === 'production') {
        morgan('combined')(req, res, next);
    } else {
        morgan('dev')(req, res, next);
    }
});
*/

 

 

[multipart.html]

 

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input type="text" name="title" />
    <button type="submit">업로드</button>
</form>

 

 

 

위 app.js를 실행한 후, localhost:3000/upload에 접속해서 실습하면 됩니다. 폴더가 생성되고, 이미지를 테스트 삼아 업로드해보면 uploads 폴더에 저장되는 것을 확인할 수 있습니다.