-
이미지와
제목
날짜등을 수정버튼을 눌렀을경우 PUT요청으로 ejs 에서 요청하여
서버에서 app.put 으로 요청을 받아서 db에 updateOne 으로 set 변경 을 요청 하려고하는데
ejs 에서 서버로 넘어온 데이터를 꺼내쓸때 enctype="multipart/form-data" 이속성을주면
값이 안넘어오고 enctype="multipart/form-data" 없앤상태에선 넘어오기도 합니다
사실 이속성을 쓰는이유가 file 이미지를 넘겨받기위해 쓰는용도로 했는데
제각각 다른ejs 에 form 속성에 enctype="multipart/form-data" 를 한번씩 사용하면
안되나요? 다른 ejs 에 이미 사용하고있어서 값이 안넘어오는건아닐것같은데 ; ;
무슨이유여서인지 값이 안넘어오거든요 ㅠㅠ
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change page</title>
<!-- JQuery import -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap import -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<!-- CSS Import -->
<link rel="stylesheet" href="/public/main.css">
</head>
<div class="container">
<ul class="list-group text-center">
<form action="/changing?_method=PUT" method="post" >
<li class="list-group-item">
<h4 class="text" >할일 제목 : <%=data.title %>
<input type="text" name="title">
</h4>
<h4 class="text">상품설명 : <%=data.description %>
<input type="text" name="description">
</h4>
<p>상품 등록 날짜 :<%=data.date %>
<input type="date" name="date">
<input type="text" name="idindex" value="<%=data._id %>">
</p>>
" width="50%" height="200px">
<input type="file" name="file2">
<button type="submit"class="btn btn-primary">수정하기</button>
</li>
</form>
</ul>
</div><body>
</body></html>
서버 코드입니다
const express = require("express");
const app = express();
app.use(express.json());
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extends: true }));
const MongoClient = require("mongodb").MongoClient;
require("dotenv").config();
app.set("view engine", "ejs");
const methodOverride = require("method-override");
app.use(methodOverride("_method"));
app.use("/public", express.static("public"));var db;
MongoClient.connect(process.env.MONGO_DB, function (err, client) {
db = client.db("toyapp");
app.listen(process.env.ROOT, function () {
console.log("Listenig 8000");
});
});
// 이미지 업로드를 위한 설치및 세팅 multer
let multer = require("multer");
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./public/image"); /* 설정한경로에 저장해라 */
},
filename: function (req, file, cb) {
cb(null, file.originalname); /* 사용자가 저장한 이미지이름그데로저장 */
},
});
var upload = multer({ storage: storage });
app.post("/upload", upload.single("image"), function (요청, 응답) {
db.collection("counter").findOne(
{ name: "게시물개수" },
function (err, result) {
if (err) return err;
var 총개시물개수 = result.totalpost;
db.collection("product").insertOne(
{
_id: 총개시물개수 + 1,
title: 요청.body.title,
description: 요청.body.description,
date: 요청.body.date,
img: 요청.file.filename,
},
function (err, result) {
응답.redirect("/");
db.collection("counter").updateOne(
{ name: "게시물개수" },
{ $inc: { totalpost: 1 } }
);
}
);
}
);
});
app.get("/", function (요청, 응답) {
응답.render("main.ejs");
console.log("main");
});
app.get("/sale", function (요청, 응답) {
응답.render("sale.ejs");
});
app.put("/changing", function (요청, 응답) {
db.collection('product').updateOne(
{ _id: parseInt(요청.body.idindex) },
{
$set: {
title: 요청.body.title,
description: 요청.body.description,
date: 요청.body.date,
},
},function(err,result){
if (err) {
return 응답
.status(400)
.send("Error!!");
}else{
console.log(result);
응답.redirect('/update');
}
}
);
});
app.get("/change", function (요청, 응답) {
응답.render("change.ejs");
});app.post("/change", function (요청, 응답) {
console.log(요청.body.idindex);
db.collection("product").findOne(
{ _id: parseInt(요청.body.idindex) },
function (err, result) {
var 결과 = result;
console.log(결과);
응답.render("change.ejs", { data: result });
}
);
});/* 상품 보여주는 거 */
app.get("/detail", function (요청, 응답) {
db.collection("product")
.find()
.toArray(function (err, result) {
응답.render("detail.ejs", { data: result });
});
});
app.get("/update", function (요청, 응답) {
db.collection("product")
.find()
.toArray(function (err, result) {
응답.render("update.ejs", { data: result });
});
});
app.get("/delete", function (요청, 응답) {
응답.render("delete.ejs");
});-----------------------------------------------------------------
app.put("/changing", function (요청, 응답) {
db.collection('product').updateOne(
{ _id: parseInt(요청.body.idindex) },
{
$set: {
title: 요청.body.title,
description: 요청.body.description,
date: 요청.body.date,
},
},function(err,result){
if (err) {
return 응답
.status(400)
.send("Error!!");
}else{
console.log(result);
응답.redirect('/update');
}
}
);
});바로 위에 코드가 문제가있나요 ?;;
- 답변은 로그인 후 가능합니다.