EJS공부 & 팀원 코드 이해하기2

EJS공부 & 팀원 코드 이해하기2

---

이미지 파일 삽입

 

📄laundryApply.html

부트스트랩 이미지파일 input

let myimg = $('#myimg').val();

<input
  type="file"
  style="
    margin-top: 30px;
    width: 80%;
    text-align: center;
    margin-left: 10%;
  "
  class="form-control"
  id="myimg"
  name="myimg"
  accept="image/*"
  onchange="loadFile(this)"
/>

 

 

 

📌 사용 패키지(Terminal)

npm install --save multer

 

📄 routes/workroutes.js

// 파일 업로드를 위한 패키지
const multer = require('multer');
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'static/img/'); // cb 콜백함수를 통해 전송된 파일 저장 디렉토리 설정
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); // cb 콜백함수를 통해 전송된 파일 이름 설정
  },
});

let upload = multer({ storage: storage });

// 여기까지
const authMiddleware = require('../middlewares/auth-middleware');

// 컨트롤러 가져오기
const WorksController = require('../controllers/workController');

// 컨트롤러를 사용하기 위한 선언
const worksController = new WorksController();

// 서비스 신청내역 가져오기
router.get('/laundry', authMiddleware, worksController.getWorks);

// 기존url+/laundry가 url로 들어 왔을 때  컨트롤러의 createWork로 이동
router.post(
  '/laundry',
  authMiddleware,
  upload.single('myimg'),
  worksController.createWork
);

multer 패키지 이용해  파일 업로드 파일 이미지 myimg로 받아옴.

이미지 저장 루트

 

📄 /controllers/workController

//createWork를 실행한다.
createWork = async (req, res, next) => {
// 받아온 데이터 변수에 선언하기
const { userId } = res.locals.user; //더미 데이터 id값
let img = ''; //img는 값이 없을땐 "" 있을땐 해당값으로 변경 되기에 let으로 선언
// 이미지 파일이 없을때
if (req.file !== undefined) {
  const { filename } = req.file;
  img = 'localhost:' + process.env.PORT + '/img/' + filename;
}
const { needs } = req.body; //요구사항 입력 받은 값을 가져오기

// createWorkDate = workService의 리턴 값이므로 workService의createWork에(userId,img,needs) 값을 가지고 가자.
const createWorkData = await this.workService.createWork(
  userId,
  img,
  needs
);

// 생성은 스테이터스 201
res.redirect('/api/laundry');
};

파일은 client랑 server가 통신하기 위해서는 img파일은 flask(python)에서와 마찬가지로 url을 알려줘야 한다.

img = 'localhost:' + process.env.PORT + '/img/' + filename;

우리 조는 .env파일로 port번호를 지정했어서 조원마다 포트 번호가 다르므로 다음과 같이 수정해주었다.

 

만약 내가 33.png라는 이미지 파일을 올렸으면 아래와 같이 표현된다.

img = localhost:4000/img/33.png

 

 

 

참고 : https://handhand.tistory.com/110

---

이미지 파일 보여주기

 

📄 workShow.ejs

 // 이미지는 null값 허용이므로 이미지 데이터가 없을 수도 있다.
<% if (datas[i].img) {%>
  <td class="tdimg" id="img<%=i%>" onmouseover="imgshow('img<%=i%>')" onmouseleave="imgdrop()">
    <%if(datas[i].img.length >0){%>
    이미지 보기
    <img style="display: none; position:absolute; width: 500px; height:500px; top:50%;left:50%;z-index: 9999; transform: translate(-25%,-50%)" src="http://<%=datas[i].img%>" alt="이미지입니다.">
	<%}else{%>

    <%}%>
  </td>
  
<%}else{%>
    <td></td>
<%}%>

고객이 요청사하에 이미지를 첨부하지 않을 수도 있기 때문에, null값이 허용된 상태이다.

이미지가 이미지보기(마우스 커서를 가져가면 이미지가 크게 보인다)

이미지가 없다면 빈 colunm이 표에 들어간다.

---

 

버튼 상태 업로드

 

📄 controllers/updateWork.controller

  updateWork = async (req, res, next) => {
    const userId = res.locals.user.userId;
    const { workId, status } = req.body;
    const updateWork = await this.updateWorkService.updateWork(workId, status, userId );
    if (updateWork === 0) {
      res.status(200).json({ msg: '대기 중' });
    } else if (updateWork === 1) {
      res.status(200).json({ msg: '수거 중' });
    } else if (updateWork === 2) {
      res.status(200).json({ msg: '수거 완료' });
    } else if (updateWork === 3) {
      res.status(200).json({ msg: '배송 중' });
    } else if (updateWork === 4) {
      res.status(200).json({ msg: '배송 완료' });
    } else if (updateWork === 5) {
      res.status(200).json({ msg: '리뷰 확인' });
    }
  };

실시간으로 update될 때마다(버튼을 클릭할 때마다) 상태가 변화는 걸 표현한 함수이다. 

 

📄 BossWork.ejs

  <script>
        document.addEventListener("DOMContentLoaded", () => {
      const status_btn = document.getElementsByClassName('status')

      for(let i = 0; i < status_btn.length; i++) {
        status_btn[i].addEventListener('click', () => {
          const data = status_btn[i].value
          const status = data.split(', ')[0]
          const workId = data.split(', ')[1]
          axios({
            method: 'post',
            url: '/api/updatework',
            data: {workId, status}
          }).then(() => {
            window.location.reload()
          })
        })
      }
    })
  </script>
  

<% if (datas[i].status) {%>
	<% if( datas[i].status === "배송 완료" ||datas[i].status === "리뷰 확인" || !datas[i].status) { %>
      	<td style="width: 15%"><%= datas[i].status %></td>
	<% } else {%>
        <td style="width: 15%">
        <%= datas[i].status %><button style="margin-left:1rem" class="status" 
        value="<%= datas[i].status %>, <%= datas[i].workId %>">업데이트</button></td>
	<% }%>
<%}%>

버튼 눌러줄 때마다 DB status 값이 1씩 증가!

만약 DB staus가 없으면 해당 상태와 버튼은 출력되지 않는다.

 

즉, 실시간으로 상태가 변할 때마다 db 데이터 또한 업데이트해주는 방식이다!