728x90
image를 서버에 올리기 위해 구글링을 해봤는데 대부분 formData를 사용해서 옮겼다.
그래서 formData가 필수적으로 필요한줄 알고 공부를 하고봤더니 form태그로 보내면 multer를 이용해서 받을수 있는것을 확인했다.
구글에서 multer를 쓴 예제들을 보며 이미지 1개를 올리는것 까지는 쉽게 구현을 했다.
문제는 여러개의 이미지를 올리는 것이었다.
input 태그에서 여러개를 올릴수 있게 multiple 속성을 추가해봤지만 되지 않았다.
내가 원하는건 한번 이미지를 올리고 그 input태그를 사용하여 다시 이미지를 올리면 총 2개의 이미지가 input 에 담기길
원했지만 그러지 않았다.
그래서 input 태그를 5개 배치하였다. multer에서 받을때도 미들웨어로 field로 받아서 가공했다.
이미지를 올리는건 수월하게 했던것 같다.
문제는 게시글을 수정할때 이미지를 수정하는 것이었다.
이미지를 수정할때 기존에 있던 이미지들을 input에 담아야 했는데 input에 file을 내가 임의적으로 입력할수가 없었다.
그래서 기존 게시물에 담겨있던 이미지들을 DB에서 가져온 후 배열에 담아놨다.
form태그를 보낼때 그 배열도 서버로 같이 보내줘서 기존 이미지들을 수정할때 참고하도록 했다.
이방법을 생각해내고 구현하는데 생각보다 시간이 오래걸렸다.
multer를 처음써보며 새로운 라이브러리를 공부해봤다. 생각보다 간편했으며 이 방법을 알고 있으면 앞으로도 써먹을 곳이 많다고 생각했다.
728x90
'팀프로젝트 > SNS(키보드워리어)' 카테고리의 다른 글
[키보드워리어] Json 객체 파싱 main.html (0) | 2022.08.28 |
---|---|
[키보드워리어] async await promise 동기 처리 (0) | 2022.08.28 |
[키보드워리어] sequelize foreign key 오류 (0) | 2022.08.24 |
[키보드워리어] 2022.08.23 git merge 병합 실수 (0) | 2022.08.23 |
[키보드워리어] 시작, 가로스크롤, 깃에러 (0) | 2022.08.23 |