1. 서버 세팅(index.js)
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const cors = require('cors');
/* bodyParser는 deprecated 됨*/
//const bodyParser = require('body-parser')
//app.use(bodyParser().json())
/* multer : multipart/form-data를 다루기 위한 미들웨어
Node.js에서 파일을 업로드하기 위해 사용되는 multipart/form-data를 다루기 위한 미들웨어이다. multipart가 아닌 폼에서는 동작하지 않는다.
*/
const multer = require('multer')
//const upload = multer({dest : 'uploads/'})
/*upload 폴더에 업로드한 파일 저장하기
하지만 이렇게 설정하면 본래의 파일의 이름과 다르게 저장되므로 주석 처리
*/
const Post = require('../server/post')
const path = require("path");
app.use(express.urlencoded({extended:true}));
app.use(express.json())
mongoose.connect("mongodb+srv://username:l2j0wo6212@cluster0.pl8yc6b.mongodb.net/?retryWrites=true&w=majority").then(() => console.log("MongoDB connected...")) //연결잘되면
.catch((err) => console.log(err));
//CORS에러 발생 : 클라인언트 접속 허용 조건 설정
const options = {
origin: "http://localhost:8080", // 접근 권한을 부여하는 도메인
credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};
//CORS 에러 적용
app.use(cors(options));
// 저장할 파일 경로 설정
const imgStorage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, 'uploads/'); // 저장할 파일 경로
},
filename: function(req, file, callback) {
fName = file.originalname; // 저장할 파일명 = 원래 파일명
callback(null, fName);
}
});
const upload = multer({
storage: imgStorage,
fileFilter: function(req, file, callback) {
var ext = path.extname(file.originalname);
console.log('ext : '+ ext);
if (ext !== '.png' && ext !== '.jpg' && ext !== '.JPG' && ext !== '.PNG') {
console.log('not png, jpg');
//return callback(null, false);
} else {
console.log('correct png, jpg');
callback(null, true);
}
}
});
// app.use('/add', upload.fields([{name : 'name'},{name:'surname'}]), (req, res, file, next) => {
// const {name,surname} = req.body;
// const {filename} = file.originalname;
// res.send(req.body);
// console.log(req.body)
// });
app.use('/add', upload.single('file'), (req, res, next) => {
const post = {
name : req.body.name,
content : req.body.content,
originalFileName : req.file.originalname
}
const doc = new Post(post)
//DB에 insert하기
doc.save(function(err, result){
if(err){
console.log(err)
}
else{
console.log(result)
}
});
res.send(req.file)
console.log(req.body)
console.log(req.file)
});
// app.use('/add', upload.fields([{name : 'name'},{name:'surname'}]), (req, res, next) => {
// const {name,surname} = req.body;
// res.send(req.body);
// console.log(req.body)
// });
/* localhost:4000/ 접속시 나올 메시지 */
app.get("/", (request, response) => {
response.send(`<h1>Hello</h1>`);
});
/* 4000포트에서 서버 구동 */
app.listen(4000, () => {
console.log("localhost:4000 에서 서버가 시작됩니다.");
});2. insert 스키마(post.js)
const mongoose = require('mongoose')
const postSchema = new mongoose.Schema({
name : {type : String},
content : {type : String},
originalFileName : {type : String},
path: {type : String}
});
module.exports = mongoose.model('PostSchema', postSchema)3. 메인페이지 HTML 레이아웃
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/style.css">
<title>Document</title>
</head>
<body>
<header>
<h1 class ="title">Carpe Diem</h1>
<nav class="headerNav">
<ul>
<li><a href ="#">로그인</a></li>
<li><a href ="#">회원가입</a></li>
<li><a href ="#">언어선택</a></li>
</ul>
</nav>
<nav class="mainmenu">
<ul>
<li class="dropdown">
<div class="dropdown-menu">회사소개</div>
<div class="dropdown-content">
<a href="#">회사소개</a>
<a href="#">Menu1-2</a>
<a href="#">Menu1-3</a>
<a href="#">Menu1-4</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown-menu">호텔예약</div>
<div class="dropdown-content">
<a href="#">Menu2-1</a>
<a href="#">Menu2-2</a>
<a href="#">Menu2-3</a>
<a href="#">Menu2-4</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown-menu">식사예약</div>
<div class="dropdown-content">
<a href="#">Menu3-1</a>
<a href="#">Menu3-2</a>
<a href="#">Menu3-3</a>
<a href="#">Menu3-4</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown-menu">환율정보</div>
</li>
<li class="dropdown">
<div class="dropdown-menu">항공권 예약</div>
<div class="dropdown-content">
<a href="#">Menu3-1</a>
<a href="#">Menu3-2</a>
<a href="#">Menu3-3</a>
<a href="#">Menu3-4</a>
</div>
</li>
<li class="dropdown">
<div class="dropdown-menu">내 예약정보</div>
</li>
</ul>
</nav>
</header>
<div class="mypic">
</div>
<form id="form">
<input type="text" name="name" value="Jayden">
<input type="text" name="content" value="Lee">
<input type="file" name="file">
<input type="submit">
</form>
</body>
<script src="src/js/index.js"></script>
</html>- 자바스크립트 파일
<script>
const form = document.getElementById('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const payload = new FormData(form);
fetch('http://localhost:4000/add', {
method: 'POST',
body: payload,
})
.then(res => res.json())
.then(data => console.log(data));
});
</script>
프론트엔드 개발자