[Vue] 서버 없이 업로드한 이미지 다루기, createObjectURL()

예전에는 서버가 있으면 업로드 한 사진을 서버에 일단 보내고
서버에서 저장한 후
서버에 저장된 URL을 다시 나에게 주면 보여주는 방식으로 작업을 했는데

요즘에는
브라우저에서 제공하는 이미지 다루는 함수를 사용하면 된다.
그러면 서버로 보내기 전에 바로 사진을 띄워줄 수 있다.

두가지 방법이 있다.
FileReader() API를 사용하거나
URL.createrObjectURL()을 사용하거나

URL.createObjectURL()

이미지 가상 호스팅

upload(e){
  const file = e.target.files;  // 업로드한 파일이 담겨있음
  const type = "image";

  if( file[0].type.indexOf(type) == -1 ){   // 문자열이 존재하지 않으면 -1 리턴
    alert("이미지만 업로드 해주세요.");
    return;
  }

  const url = URL.createObjectURL(file[0]); // 업로드한 파일의 임시 URL
  this.tab = 1;
  this.uploadImage = url;
},

upload(e){
  let file = e.target.files;  // 업로드한 파일이 담겨있음
  let url = URL.createObjectURL(file[0]); // 업로드한 파일의 임시 URL
  this.tab = 1;
console.log(file, url);
},

blob (Binary Large Object)
컴퓨터 안에 있는 모든 파일은 원래는 0과 1로 이루어진 binary 데이터이다.
이런 binary 데이터를 브라우저에서 다루려면, blob이라는 object에 담아서 다루게 된다.