토이프로젝트_ 포토앨범 (3단계 router 세팅, GET POST api 생성, multer storage 세팅)

routes 디렉토리, routes.js 파일에 multer로 업로드된 파일과 텍스트의 데이터를 POST와 GET 형식으로 서버와 클라이언트가 주고 받을 수 있도록 세팅해준다.

ulpoads 라는 디렉토리도 미리 생성해준다 (앞으로 multer를 통해 업로드된 이미지가 저장될 경로)

1. multer 로 업로드한 데이터드를 저장할수 있는 storage를 세팅한다

• uploads 폴더를 업로드한 image 저장하는 경로로 만들기
• image는 fieldname+날짜+오리지널파일명 으로 저장하기

const express = require('express');
const multer = require('multer');
const files = require('../models/files');

//uploads 폴더로 multer를 사용해 업로드 된 이미지 파일을 담는 storage를 만든다.

var storage = multer.diskStorage ({
    destination: function (req, file, cb) {
        cb (null, './uploads/');
    },
    filename: function (req, file, cb) {
        cb (null, file.fieldname+"_"+Date.now()+"_"+file.originalname);
    },

});

var upload = multer({
    storage: storage,
}).single('image');

2. router 만들어 주기

const router = express.Router();
const File = require('../models/files');

router.get('/', (req, res)=> {
    res.render('index', {title: 'Photo Album'});
});

module.exports = router;

3. rest api GET, POST routes 만들어 주기

• POST: multer로 업로드한 데이터를 연결해둔 mongodb로 저장하기
• GET: mongdb에 있는 데이터를 불러오기 (포토앨범 디스플레이)

// POST 설정: 인풋박스 데이터 db에 저장하기, 오류있으면 알럿 생성하기 
router.post('/', upload, (req,res)=> {
    const file = new File({
        username: req.body.username,
        comment: req.body.comment,
        image: req.file.filename,
    });
    file.save((err)=> {
        if(err){
            res.json({message: err.message, type: 'danger'});
        }else{ 
                req.session.message = {
                    type: 'success',
                    message: 'file added successfully'
                };
                res.redirect('/');
            }
        });

    });

//GET 설정: db에 저장되어있는 데이터 찾아서 로컬호스트 5000으로 불러오기 
router.get("/", (req, res)=> {
    File.find().exec((err,files)=> {
        if(err){
            res.json({message: err.message});
        }else{
            res.render('index', {
                title: 'Phote Album',
                files: files,
            });
        }
    })
});