우리 팀이 만들 포트폴리오는 쇼핑몰이고
거기서 나는 상품관련 벡엔드를 맡았다.
그렇다면 상품에 대한 DB구축과 이미지 작업이 들어가야한다.
오늘 다룬것은 이미지에 대한 며칠간의 노고를 적어보려한다.
1. 이미지는 어떻게 DB 에넣나?
이미지를 어떻게 벡엔드를 통해서 DB에 넣을까?
이미지는 그림이고, DB에는 문자열만 들어간다. 이미지 자체가 들어가지 않는다
그렇다면 어떻게하지?
답은 구글링
구글링을 통해 Nodejs 는 Multer 라는 모듈을 사용한다는 사실을 알아냈다.
Multer라는 모듈을 routes>productimagefile.js에 적는다.
storage는 이미지 파일이 들어갈때 넣을파일위치(upload/)와
filename의 경우 유니크값 인데 Date.now 를 써서 매번 이름을 다르게 한다. 이렇게하면
같은 이미지를 넣어도 이름이 달라서 문제가없다.
벡엔드 파트를 맡으면서 느끼는건
벡엔드는 작업하나하나 세세하게 생각하면서 작업해줘야 한다는것 아니면 두번세번 고생해야함
자 그러면 이제 다음 단계
이미지파일을 db에 넣으려고하는데 multer라는 모듈을 이용한건 좋은데
어떻게 넣을까?
이미지를 업로드하면 이미지에 대한 결과값은 req.file안에 담긴다.
먼저 이미지결과값이 나오는 req.file를 console.log로 입력한뒤
postman를 이용하여 이미지를 업로드해보았다.
업로드할때는 form-data를 이용하여 업로드해야한다.
나의 경우에는
이렇게 imgFile을 적어놓았기 때문에
이렇게 쓴뒤 업로드를 한다.
cmd를 확인하면
이렇게 정보가 나온다.
이게 내가 업로드한 파일
여기서 내가 필요한것만 추출한뒤 db에 넣어야한다.
프론트에서 필요한것은
filename, path 두개 이다.
filename경우에는 유니크 값이지만 서버에 저장될때마다 Date.now를 써서 이름이 다르게
들어가게 코드를 짯기때문에 같은 이미지도 중복되게 넣을수있다.
해결하기위해 먼저 보기편하기 하기위해 models 쪽을 손봤다.
console찍힌 것과 같게 이름을 바꿔주고
router쪽 가서
이렇게 바까주면
자 이제 업로드시 DB에도 잘 들어간다.
upload파일쪽을 보면
![]
이렇게 잘 들어간걸 확인할수있다.
나이스 샤샤샤~
하지만 여기서 끝이 아니었다. 하하.. 이후는 두번째편
