-
글쓴이글
-
2022년 5월 6일 05:08 #33326
서영석참가자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 )
},
fileFilter: function (req, file, callback) {
var ext = path.extname(file.originalname);
if(ext !== '.png' && ext !== '.jpg' && ext !== '.jpeg') {
return callback(new Error('PNG, JPG만 업로드하세요'))
}
callback(null, true)
},});
var upload = multer({storage : storage});
app.get('/upload', function(req, res){
res.render('upload.ejs')
});app.post('/upload', upload.single('photo'), function(req, res){
res.send('업로드완료')
});app.get('/image/:imageName', function(req, res){
res.sendFile( __dirname + '/public/image/' + req.params.imageName )
});이렇게 multer를 통해 이미지를 업로드를 했습니다.
상품 관리 페이지를 만들었습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록</title>
<link rel="stylesheet" type="text/css" href="css/brand.css"><style>
h3 {
text-align: center;
}
h1 {
text-align: center;
}
div.minimalistBlack {
border: 1px solid #000000;
width: 100%;
height:1px;
text-align: left;
border-collapse: collapse;
}
.divTable.minimalistBlack .divTableCell, .divTable.minimalistBlack .divTableHead {
border: 1px solid #000000;
}
.divTable.minimalistBlack .divTableBody .divTableCell {
font-size: 13px;
}
.divTable.minimalistBlack .divTableHeading {
background: #CFCFCF;
background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 88%);
border-bottom: 0px solid #000000;
}
.divTable.minimalistBlack .divTableHeading .divTableHead {
font-size: 15px;
font-weight: bold;
color: #000000;
text-align: left;
}
.minimalistBlack .tableFootStyle {
font-size: 14px;
font-weight: bold;
color: #000000;
border-top: 0px solid #000000;
}
.minimalistBlack .tableFootStyle {
font-size: 14px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
</style>
</head>
<body>
<header>
<%- include('nav2.ejs') %>
</header>
<div></div>
<h3>상품목록 조회</h3>
<div></div>
<div class="divTable minimalistBlack">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">이미지</div>
<div class="divTableHead">상품번호</div>
<div class="divTableHead">상품명</div>
<div class="divTableHead">가격</div>
<div class="divTableHead">카테고리분류</div>
<div class="divTableHead">향수종류</div>
<div class="divTableHead">향구성</div>
<div class="divTableHead">수량</div>
<div class="divTableHead">삭제</div>
<div class="divTableHead">수정</div>
</div>
</div>
<div class="divTableBody">
<% for(var i=0; i<notes.length; i++) {%>
<div class="divTableRow">
<strong><div class="divTableCell"></div></strong>
<div class="divTableCell"><%=notes[i]._id%></div>
<div class="divTableCell"><%=notes[i].상품명%></div>
<div class="divTableCell"><%=notes[i].가격%>원</div>
<div class="divTableCell"><%=notes[i].카테고리분류%></div>
<div class="divTableCell"><%=notes[i].향수종류%></div>
<div class="divTableCell"><%=notes[i].향구성%></div>
<div class="divTableCell"><%=notes[i].수량%></div>
<div class="divTableCell"><button type="button" class="delete2" data-id="<%= notes[i]._id %>">삭제</button></div>
<div class="divTableCell"><button type="button" class="update" data-id="<%= notes[i]._id %>">수정</button></div>
</div>
<% } %>
</div>
</div>
<div>
<a href="/write"><h1>상품등록</h1></a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$('.delete2').click(function(e){
var 상품번호 = e.target.dataset.id;
var 지금누른거 = $(this);
$.ajax({
method : 'DELETE',
url : '/delete2',
data : { _id : 상품번호 }
}).done((결과)=>{
console.log('성공했어욤');
지금누른거.parent('divTableRow').fadeOut();
})
});
</script></body>
</html><div class="divTableCell"></div> 에 이미지 파일을 보여주려고 하는데
이미지경로를 불러오는 방법이 있는 질문을 올리게되었습니다.
2022년 5월 6일 09:36 #33330
codingapple키 마스터이미지 업로드시 이미지저장한 경로도 원하는 db document에 문자형태로 저장해두면 됩니다
그리고 필요할 때 가져와서 <img src=""> 안에 넣으면 됩니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.