[Vue/코딩애플/part3] 3. tab 만들기 / URL.createObjectURL()

📌 Tab 만들기

// App.vue
<!-- tab 기능 실습 -->
  <div v-if="step === 0">내용0</div>
  <div v-if="step === 1">내용1</div>
  <div v-if="step === 2">내용2</div>
  <button @click="step = 0">버튼0</button>
  <button @click="step = 1">버튼1</button>
  <button @click="step = 2">버튼2</button>
  <div style="margin-top: 500px;"></div>

 

data () {
    return {
      data,
      moreNum : 0,
      step : 0 // tab 구분값
    }
}​

 

step 이 0이면 내용0 이 노출,

step 이 1이면 내용1 이 노출된다.

 

버튼에 클릭이벤트를 넣음으로써 step 의 state 를 변경시켜준다.

 

 

⚡ 여러 페이지를 만들 때 vue-router 를 써도 되지만 간단한 UI 는 탭으로 만들어도 된다.

⚡ 중요한 데이터들은 웬만하면 상위 컴포넌트에 저장하자 (App.vue)

 

 

📌 서버 없이 업로드한 이미지 다루기 / URL.createObjectURL()

이미지 업로드한 걸 HTML 에 보여주려면 업로드 한 걸 서버로 보내고 저장시켜야 한다.

그 후에 저장된 URL 을 유저에게 보내는 것이다. (저장된 URL 을 img scr="" 에 넣음)

 

IE11 이상에선 브라우저 내에서 직접 이미지 조작이 가능하다.

 

1. FileReader() : 이미지를 글자로 변환 (글자니까 저장 기능 활용 가능)

2. URL.createObjectURL() : 이미지 URL 을 잠깐 만들어준다 (새로고침하면 사라짐) / 가상 호스팅해준다고 생각(이미지의 가상 URL 생성)

 

실습에서는 2번을 활용해보자.

 

파일 업로드시 코드 실행하려면 input 태그에 @chage=''' 를 활용한다.

 

<input @change="upload" type="file" id="file" class="inputfile" />

 

// moethods 
upload (e) {
      let file = e.target.files;
      console.log('file > ', file);
      console.log('0번째 파일 > ', file[0]);
}

 

e.target.files 에 정보가 담겨있다. (Array 형식)

 

 

업로드 후에 다음 페이지로 보내고 업로드한 이미지를 띄우려면?

let file = e.target.files
let url = URL.createObjectURL(file[0]); // 업로드한 이미지의 URL 생성

 

upload(e) {
      let file = e.target.files
      let url = URL.createObjectURL(file[0]); // 업로드한 이미지의 URL 생성
      console.log('url > ', url)
      this.step = 1; // 업로드 후 다음 페이지로 이동
}

 

 

BLOB : binary 데이터를 다룰 때 BLOB 이라는 object 에 담아서 다룬다

 

 

🔎  input 을 여러개 받고 싶다면?(사진 여러개 선택)

multiple 을 추가한다.

<input @change="upload" multiple type="file" id="file" class="inputfile"/>

 

 

🔎  <input> 에서 이미지만 선택하게 하려면? 

accept="image/*" 를 추가한다.

 

처음 선택할 때 이미지만 보여주는 것이지 사용자가 강제로 이미지 외의 파일을 선택가능하다 (근본 해결책 X)

무조건 이미지만 선택 가능하게 하려면 자바스크립트에서 확장자 검사해야함 (file[0].type 을 출력해보자)

<input @change="upload" multiple accept="image/*" type="file" id="file" class="inputfile"/>