Image upload Process

TEDDY·2022년 12월 19일
0

CODECAMP

목록 보기
32/53
post-thumbnail

이미지 업로드

  1. Back-end에 파일을 업로드하는 API를 만든다.
  2. 브라우저에 파일 태그를 만든다.
  3. 태그를 통해 파일을 선택하면 파일 객체가 들어오고, 그 객체를 state나 변수에 저장할 수 있다.
  4. 파일을 uploadFile API에 보내면 Back-end에서 Storage로 파일을 전송한다.
  5. Storage에서는 파일을 저장해주고 그 파일을 다운받을 수 있는 주소를 준다.
  6. Back-end가 그 주소를 받아서 다시 프론트에 돌려준다.
    전달받은 주소를 img 태그 등에 사용하면 실제로 브라우저에서 해당 이미지를 볼 수 있게 된다.
  7. API에 image 주소와 이미지에 대한 각종 정보를 넘긴다.
    DB에 이미지 주소를 등록하고, 클라이언트 요청시 image 주소를 받아와서 화면에 보여준다.

데이터베이스는 각각의 타입이 있다. (text, integer ...)
이미지 주소가 문자열로 들어가면 text, 실제 이미지가 들어가면 blob 타입이 된다.

blob

: bynary large object 0과 1로 구성된 이진 데이터
사진을 0과 1로 변환해서 집어넣는다.

사진은 픽셀 단위로 이루어져있다.
각 픽셀은 rgb 색상을 가지고 이으며, 각 색상 값을 숫자로 표현한다. 하지만 사이즈가 크기 때문에 해당 이미지를 storage에 저장하고, 다운로드 할 수 있는 주소만 받아서 사용하는 방식을 사용한다.

0개의 댓글