🦁 Python Online Store 만들기 6편 - 상품 이미지 upload

🎈 Front End Developer 의 Back End 도전기 ! 🎈

이 글은 PROJECT LION : 호코치 강사님의 강의를 들으며 참고한 글입니다.

작업 중, 개발과정 정리 및 issue가 되었던 부분들을 공유 및 기록하고자 작성하게 되었습니다.

1. img upload

✍ 이전 시간에는 판매하고자 하는 상품의 고유 값 및 정보들의 값을 db에 저장하였다.

추가적으로 list에 뿌려질 thumbnail img 및 view page의 img 도 파일 경로를 생성한 후 지정된 filename으로 저장하여 값을 넘겨보도록 하겠다.

1. request file 경로 생성(thumbnail 및 detail img)
   = 해당 img file을 upload 하게 되면, request.files 라는 곳에 thumbnail_img 및 detail_img 라는 file의 정보를 얻을 수 있다.

   file 정보의 경우 어딘가에 저장 해 주어야 하는데, file은 text가 아닌 말 그대로 file 형태이기 때문에 python file 과 같은 file 형태로 저장해 주어야 한다.

---

2. img_file upload 위한 함수 생성
   = 각 코드의 흐름에 맞게 순서대로 주석처리 하였지만 다시한번 복습할 겸 순서를 나열하며 코드를 재작성 해보겠다.

🧸 함수 내부 순서 🧸
2-1. upload 시킨 날짜를 확인하기 위해, timestamp 함수 사용
2-2. 생성된 file 이름에는 생성한 날짜와 이름을 추가한다.
2-3. upload 시키고자 하는 path 설정
2-4. directory 존재 유무를 파악하여 해당 directory에 path 및 filename upload
2-5. path 경로에 file save
2-6. 저장된 path 경로 > img file mongoDB upload

---

3. upload file 함수 호출 및 img 값 db전달
   = upload_file 함수 호출 및 요청한 img 값을 thumnail_img_url 및 detail_img_url 변수에 저장 후, db 에 전달하기 위해 insert_one 내부에 값을 전송해준다.

---

4. 요청 후 전달받은 값 db 전송
   = db에 보내줄 값을 받아서, insert 시켜준다(user값은 임의로 admin으로 세팅했으며, 생성날짜 및 수정날짜는 filename을 저장할 때 처럼 timestamp 값을 정수 type으로 생성하여 db에 담아주었다.)

---

5. datetime, secure_filename, os 불러오기
   = models > product.py file도 datetime 을 사용했으므로, 동일하게 datetime import 필요

---

6. upload 테스트
   = Insomnia 접속 후, file 형태로 thumbnail img 및 detail img 첨부 후 전송

---

7. static/uploads folder 생성 확인
   

---

8. MongoDB 전송 값 확인
   

이로써 img file이 db에 정상적으로 저장 된 것을 확인할 수 있다 😎

상품등록 API에 대한 구현을 완료하였다!

현업에서는 fe 업무만 수행하고 있어, 실질적으로 값을 저장하고 넘기는 작업은 처리해 보지 못했는데, 실제로 코드를 작성하고 값을 넘기는 작업을 수행해보니 재밌는 것 같다. (아직 코드는 손쉽게 작성하지는 못할 것 같다 😂)

다음시간에는 상품등록 page를 구현하여 실제 web browser에서 등록이 가능하도록 해보겠다.