Image upload Process

Image upload Process(파일 업로드) 란?

이미지 업로드 과정

실제 이미지는 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에 저장하고, 다운로드 할 수 있는 주소만 받아서 사용하는 방식을 사용한다.

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

이미지 업로드

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 태그로 파일을 서버로 전송

  <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 정보로 지정한다.

이미지 업로드 방법에도 여러가지가 있다
참조1
참조2