[vuejs] 이미지 업로드하여 preview 조회 (FileReader 또는 URL.createObjectUrl 사용)

 

방법은 2가지가 있다. (css는 모두 제거한 상태이므로 모양이 예쁘지 않음)

 

1. FileReader()를 사용하는 방법

 - 비동기적으로 실행된다. 

 - base64로 인코딩된 값을 반환

 

2. URL.createObjectUrl()을 사용하는 방법

 - 동기적으로 실행된다. 실행 속도가 조금 더 빠르다.

 - hash 형태의 url을 반환

---

■ FileReader 사용

const uploadImg = (e) => {
  var input = e.target;
  if (input.files && input.files[0]) { //사진 1개인 경우 (multiSelect 하려면 for문 돌려야함)
    var reader = new FileReader();
    reader.onload = (e) => {
      state.imgUrl = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  }
};

 

■ URL.createObjectUrl 사용

const uploadImg = (e) => {
  let file = e.target.files;
  let url = URL.createObjectURL(file[0]);
  state.imgUrl = url;
};

 

두 방법 다, imgUrl 변수에 이미지 url 을 추출하여 넣어주므로 <img> 태그에서 뿌려주기만 하면 된다.

<input @change="uploadImg" type="file" />
<img :src="imgUrl" />