🔧   이미지 업로드 과정

실제 이미지는 Storage에 저장하고, 주소를 활용해 처리

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

💎   image를 DB에 직접 넣지 않는 이유

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

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

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

💎 결론: 데이터베이스에 이미지를 직접 저장하는 방식은 사용하지 않는다.

🚀   이미지 업로드

HTML

form 태그를 통한 파일 업로드

 1. input 태그로 업로드할 파일을 불러온다.

<input type="file" name="file" id="imageFileOpenInput" accept="image/*">

• input으로 전송된 파일을 server 에서 name의 밸류로 받게된다.
• accept는 전송이 가능한 파일 타입을 지정하게된다. (위 예제는 모든 이미지 타입을 허용한다.)

png와 jpeg를 허용한 예제

<input type="file" name="file" id="imageFileOpenInput" accept="image/png, image/jpeg">

---

 2. form 태그로 파일을 서버로 전송

<form method="post" action="upload" enctype="multipart/form-data">
  <div>
    file : <input type="file" name="file" accept="image/*">
  </div>
  <input type="submit">
</form>

• method : http의 method 종류 선택 ( ex) get, post ... )
• action : 폼 데이터(form data)를 전송할 경로 설정
• enctype : 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시
  
  enctype 속성 종류
  

---

Javascript

JS를 통한 파일 업로드

input 태그의 accept 속성은 브라우저 지원 범위가 좋지 않다. 그렇기 때문에 JS를 사용하여 파일을 업로드 함으로써 이러한 단점을 줄일 수 있다.

---

💎 업로드 코드

const elImage = document.querySelector("#reviewImageFileOpenInput");
elImage.addEventListener("change", (evt) => {
  const image = evt.target.files[0];
  if(!validImageType(image)) { 
    console.warn("invalide image file type");
    return;
  }
});
function valideImageType(image) {
  const result = ([ 'image/jpeg',
                    'image/png',
                    'image/jpg' ].indexOf(image.type) > -1);
  return result;
}

---

file 업로드 시, change 이벤트로 이를 감지할 수 있다.
이때 event 객체의 target으로부터 file 객체를 얻을 수 있다.
이 file 객체의 타입을 valideImageType 메서드로 검사한다.

이미지를 업로드할 때 어떤 이미지인지 알려주는 썸네일 기능을 제공해주려면, Ajax로 이미지 같은 파일을 먼저 서버로 전송하고, 잘 전송되면 받는 응답 값에서 이미지 주소를 받아 썸네일로 제공할 수 있다. 여기선 일단 편의상 서버로 올리기 전, createObjectURL을 사용하여 썸네일을 노출하는 방법만 알아보기로 한다..

 const elImage = document.querySelector(".thumb_img");
 elImage.src = window.URL.createObjectURL(image);

썸네일 이미지를 노출시킬 img 엘리먼트를 선택하고,
그 img 태그의 src 값을 이미지 url 정보로 지정한다.

참조

• https://enai.tistory.com/37
• http://www.tcpschool.com/html-tag-attrs/form-enctype