NODE.JS 활용 (6)

 

 

 

 

 

 

 

NODE.JS file (1)

enctype="multipart/form-data" : form태그 안에 파일을 보내는 형식 설정

* controller에서 module.exports 안에 양이 많아지는걸 대비해 ,

따로 오브젝트를 만들어서 여러 함수를 저장한 후, 

내보낼 때는 키 밸류 형식으로 내보낸다.

* 따라서, router에서 보낸때는 컨트롤러면.오브젝트명.함수명 형식으로 보낸다.

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

NODE.JS file (2)

npm install multer@1.4.4 --save : multer 기능 설치

req.file : 받아온 파일 전송 방법

require("multer") : 설치한 multer기능 불러오기

multer.diskStorage({

destination: (req, file, db) => { : cb : 파일이 들어왔을때 어떻게 처리할 지

cb(null, "upload_file") : 파일을 불러왔을때 어디에 저장할 지 지정

destination: (req, file, db) => { 

cb(null, file.originalname) : 넘겨올 떄 파일 이름을 원하는대로 설정(originalname : 원본 파일명)

Data.now() : 현재 시각

cb(null, true) : true면 저장

controller에게 보낼 때, upload.single("file_name") : 단일 파일 저장 목적 (괄호 안에는 ejs에서 널길 때 파일명과 동일)

const router = require("express").Router();
const multer = require("multer"); //설치한 multer기능 불러오기
//const upload = multer({ dest: "upload_file" }); // 사용자가 파일을 넘겼을 때 어디(폴더)에 만들지 지정
// dest : 목적지
const stg = multer.diskStorage({
  destination: (req, file, cb) => {
    // cb : 파일이 들어왔을때 어떻게 처리할 지
    console.log("req : ", req.body);
    console.log("file : ", file);
    console.log("cb : ", cb);
    cb(null, "upload_file");
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname); // 넘겨올 때 파일 이름을 원하는대로 설정 (originalname = 원본 파일 명)
  }, // Date.now() : 현재 시각
});

const f_filter = (req, file, cb) => {
  console.log("f_filter file : ", file.mimetype.split("/"));
  const type = file.mimetype.split("/");
  // if (type[1] == "jpg" || type[1] == "jpeg" || type[1] == "png") {
  if (type[0] == "image") {
    cb(null, true); //true면 저장
  } else {
    req.fileValidation = "이미지만 저장하세요";
    cb(null, false);
  }
};

const upload = multer({ storage: stg, fileFilter: f_filter });
const fileCtrl = require("./../controller/file_controller");

router.get("/", fileCtrl.view.index);
router.post("/upload", upload.single("file_name"), fileCtrl.process.upload);
//단일 파일 저장 목적(괄호 안에는 ejs에서 넘길 떄 파일명과 동일하게)

module.exports = router;

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

NODE.JS file (3)

res.download(경로) : 경로에 있는 것을 다운로드 해주는 기능

thist = 본인 태그 자기 자신

FileReader() : 파일을 불러오는 기능

불러오 파일.onload() : 파일을 화면에 보여주는 기능

onchange="" : HTML요소에 변화가 일어났을 때

readAsDataURL() : 해당 객체를 URL표현으로 변환

<script>
  const readURL = (input) => {
    console.log(input);
    console.log(input.files[0]);
    const file = input.files[0];
    if (file != "") {
      let reader = new FileReader(); // 파일을 불러오는 기능
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        // 파일을 화면에 보여주는 기능
        console.log(e.target.result);
        document.getElementById("img").src = e.target.result;
      };
    }
  };
</script>

<form action="/file/upload" method="post" enctype="multipart/form-data">
  <!-- 파일 보내는 형식 표시 -->
  <input type="text" name="title" /><br />
  <img id="img" src="" width="100" height="100" />
  <input type="file" name="file_name" onchange="readURL(this)" /><br />
  <input type="submit" value="전송" />
</form>
<hr />
<a href="/file/list">목록 확인</a>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

NODE.JS file (4)

fs.unlinkSync : 파일 삭제

* 기능이나 함수들은 script를 통해 받아온다

* css는 link를 통해 받아온다

app.use("/static", express.static("./public")) : public이라는 위치를 static이라는 명칭으로 사용

                                         그렇지 않으면 가져올 수 없다

const router = require("express").Router();
const multer = require("multer"); //설치한 multer기능 불러오기
//const upload = multer({ dest: "upload_file" }); // 사용자가 파일을 넘겼을 때 어디(폴더)에 만들지 지정
// dest : 목적지
const stg = multer.diskStorage({
  destination: (req, file, cb) => {
    // cb : 파일이 들어왔을때 어떻게 처리할 지
    console.log("req : ", req.body);
    console.log("file : ", file);
    console.log("cb : ", cb);
    cb(null, "upload_file");
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname); // 넘겨올 때 파일 이름을 원하는대로 설정 (originalname = 원본 파일 명)
  }, // Date.now() : 현재 시각
});

const f_filter = (req, file, cb) => {
  console.log("f_filter file : ", file.mimetype.split("/"));
  const type = file.mimetype.split("/");
  // if (type[1] == "jpg" || type[1] == "jpeg" || type[1] == "png") {
  if (type[0] == "image") {
    cb(null, true); //true면 저장
  } else {
    req.fileValidation = "이미지만 저장하세요";
    cb(null, false);
  }
};

const upload = multer({ storage: stg, fileFilter: f_filter });
const fileCtrl = require("./../controller/file_controller");

router.get("/", fileCtrl.view.index);
router.post("/upload", upload.single("file_name"), fileCtrl.process.upload);
//단일 파일 저장 목적(괄호 안에는 ejs에서 넘길 떄 파일명과 동일하게)
router.get("/list", fileCtrl.view.list);
router.get("/download/:fileName", fileCtrl.view.download);
router.get("/deleteFile/:fileName", fileCtrl.process.deleteFile);
router.get("/modify_form/:fileName", fileCtrl.view.modifyForm);
router.post("/modify", upload.single("newFileName"), fileCtrl.process.modify)
module.exports = router;

const fs = require("fs");
const view = {
  // module.exportes안에 양이 많아지는걸 대비해 따로 오브젝트를 만들어서 여러 함수를 저장한 후,
  // 내보낼때는 키 밸류 형식으로 내보낸다.
  index: (req, res) => {
    console.log("controller index 연동");
    res.render("file_index");
  },
  list: (req, res) => {
    let fList;
    fList = fs.readdirSync("./upload_file");
    res.render("file_list", { list: fList });
  },
  download: (req, res) => {
    const path = `./upload_file/${req.params.fileName}`;
    res.download(path); //다운로드를 해주는 기능
  },
  modifyForm: (req, res) => {
    const fileName = req.params.fileName;
    res.render("modify_form", { fileName });
  },
};
const process = {
  upload: (req, res) => {
    console.log(req.file); // 파일 전송 방법
    console.log("========");
    console.log(req.body);

    console.log("validation : ", req.fileValidation);
    if (req.fileValidation) {
      return res.send(req.fileValidation);
    }
    res.send("연동");
  },
  deleteFile: (req, res) => {
    fs.unlinkSync("./upload_file/" + req.params.fileName); //파일 삭제
    res.redirect("/file/list");
  },
  modify: (req, res) => {
    console.log("req.file : ", req.file)
    if (req.file) { //파일을 변경했다면
        return res.redirect(`/file/deleteFile/${req.body.originFileName}`);
    }
    res.redirect("/file/list");
  }
};

module.exports = { view, process };

 

실행 결과