게시판에서 여러장의 이미지를 저장시키고 불러오고자했다.
<input type="file" name="img1" accept="image/*" multiple>
파일을 등록하는 위 코드 맨 뒤에 multiple 을 붙여주고 서버에서
upload.array('img1',5)(req, res, async (err) => {
다음과 같이 single 을 array 로 바꿔주고 img1 옆에 최대 저장 가능한 사진 수를 지정해줬다.
그러고나서 req.file 로 불러오던 값을 s 를 붙여서
이렇게 출력해봤다.
나는 이렇게 출력하면 이미지 주소같은 것이 배열로 정리가 되고
이를 req.files[0], req.files[1] 이런 꼴로 배열처럼 불러올 수 있을거라고 생각했다.
근데
location: 'https://bigstarhan33.s3.ap-nows.com/17047'
위 주소 일부를 생략했지만 위처럼 하나의 위치에 파일들이 한 번에 저장되는 꼴이었다.
이를 어떻게 해결할 수 있을까...
일단 이미지가 저장이 안되어있을 때 빈 값으로 저장이 되어야한다.
그래서
const imageArray = req.files.length > 0 ? req.files.map(file => ({ filename: file.filename, location: file.location })) : [];
req.files.length 는 아무런 이미지가 저장되어있지 않으면 길이가 0 일 것이기 때문에 빈 배열 [] 꼴로 저장시키고, 0보다 크면 map 고차함수를 이용해 배열로 저장시킨다.
그 값을
await db.collection('notice').insertOne(
{
today: Today,
time : Time,
title: req.body.title,
content: req.body.content,
img : imageArray,
user: req.user._id,
username: req.user.username
}
)
다음처럼 넣어 DB 에 저장시킨다.
<div class="image-container">
<% if (글.img == '') {%>
<img class="detail-img" src="<%= 글.img%>">
<%} else {%>
<% for ( i=0; i< 글.img.length; i++) {%>
<img class="detail-img" src="<%= 글.img[i].location%>">
<%}%>
<%}%>
</div>
보면 글.img 값이 있는 경우에만 상황에 따라 두 코드를 진행시킨다.
만약 글.img 값이 위 서버에서 저장시킨 것 처럼 빈 배열이라면, 이미지를 출력시키지 않도록 했다.
하지만 에러 발생.
만약에 이미지파일을 첨부하지 않고 DB에 저장시에 어떻게 저장되는지 확인해봤다.
null 값으로 확인됐다.
그래서 수정
<div class="image-container">
<% if (글.img == null) {%>
<img class="detail-img" src="<%= 글.img%>">
<%} else {%>
<% for ( i=0; i< 글.img.length; i++) {%>
<img class="detail-img" src="<%= 글.img[i].location%>">
<%}%>
<%}%>
</div>
img 가 null 이면
원래대로 글.img 로 출력하면 빈 배열이기 때문에 아무것도 출력되지 않는다.
이미지가 저장되어있을 시에 반복문을 통해 이미지 전체를 출력시킨다.
근데 굳이 else 를 넣을 필요가 있나?
<div class="image-container">
<% if (글.img != null) {%>
<% for ( i=0; i< 글.img.length; i++) {%>
<img class="detail-img" src="<%= 글.img[i].location%>">
<%}%>
<%}%>
</div>
그냥 null 이 아닐 때 저렇게 출력해서 코드를 간소화했다.