[CRUD을 이용한 File upload Web] (7) router에 이미지 업로드 (multer) 시키고 메인 홈으로 redirect

<본 블로그는 DCodeMania 의 유튜브를 참고해서 공부하며 작성하였습니 :-)>

=> CRUD App With Image Upload Using NodeJs, ExpressJs, MongoDB & EJS Templating Engine

 

 

🥕 이미지 업로드 (multer) 시키고 메인 홈으로 redirect

🐧 routes/routes.js

const express = require("express");
const router = express.Router();
const User = require("../models/user");
const multer = require("multer");

// image upload
var storage = multer.diskStorage({
  // 파일이 업로드될 경로 설정
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  // timestamp를 이용해 새로운 파일명 설정
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
  }
})

var upload = multer({
  storage: storage,
}).single("image");   // 한 개의 이미지 처리

// Insert an user into database route
router.post("/add", upload, (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: req.file.filename,
  });

  user.save().then((err) => {
    // index.js 에 res.locals.message 있음
    req.session.message = {
      type: "success",
      message: "User added successsfull!"
    };
    // 지정된 다른 URL로 재요청 (홈)
    res.redirect("/");
  }).catch((err) => {
    res.json({ message: err.message, type: "danger" });
  })
});

// Home (ejs 와 연동)
router.get("/", (req, res) => {
  res.render("index", { title: "Home" });
});

router.get("/add", (req, res) => {
  res.render("addUsers", { title: "Add users" });
})

module.exports = router;

버튼 누르면 메인 홈으로 돌아감!!!!!!!!!!!!!!!!!!!!!!

 

 

 

🥕 <% 이용해 다른 페이지에서 받은 데이터를 html에 띄워줌

1. <% %> : EJS 에서 소스내 에서 실행되지만 보이지는 않는 태그

2. <%- %> : <% %> 태그와는 조금 다르게 HTML 코드를 날것(Raw)로 보임

3. <%= %> : 이스케이프 문자를 포함, 다른 페이지에서 받아온 데이터를 넣어줄 때

 

🐧 views/index.ejs

 <div class="container">
    <div class="row my-4">
      <div class="col-lg-12">
        <!-- router 에 있는  locals.message 가져옴 -->
        <!-- 
        1. <% %> : EJS 에서 소스내 에서 실행되지만 보이지는 않는 태그
        2. <%- %> : <% %> 태그와는 조금 다르게 HTML 코드를 날것(Raw)로 보임
        3. <%= %> : 이스케이프 문자를 포함, 다른 페이지에서 받아온 데이터를 넣어줄 때
       -->
        <% if (message) { %>
          <div class="alert alert-dismissible fade show alert-<%= message.type %>" role="alert">
            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            <strong>
              <%= message.message %>
            </strong>
          </div>
          <% } %>
            <div class="table-responsive">
              <!-- 화면 크기에 따라 효과적으로 콘텐츠가 표시되도록 테이블을 조정 -->
              <table class="table table-striped">
                <!-- 테이블의 열의 머리글인 행들의 집합 -->
                <thead class="table table-striped text-center">
                  <tr class="table-dark">
                    <th>ID</th>
                    <th>Image</th>
                    <th>Name</th>
                    <th>E-mail</th>
                    <th>Phone</th>
                    <th>Action</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>1</td>
                    <td><img src="" alt=""></td>
                    <td>gani</td>
                    <td>gani@test.com</td>
                    <td>010-1234-1234</td>
                    <td>
                      <a href="" class="text-success"><i class="fas fa-edit fa-lg mx-1"></i></a>
                      <a href="" class="text-danger"><i class="fas fa-trash fa-lg mx-1"></i></a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
      </div>
    </div>
  </div>

  <%- include("layout/footer") %>

user added successful 이라구 배너도 넣어줌!!!!