[vuestagram] 서버없이 업로드한 이미지 다루기

이미지 업로드한 걸 HTML에 보여주려면?
2가지 방법이 있음
1. FileReader(): 파일을 글자로 변환해줌
2. URL.createObjectURL(): 이미지의 가상 URL을 생성해줌

우리는 URL.createObjectURL() 사용

file 정보 출력

input 클릭 시 upload 함수 실행

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

methods: {
    upload(event){
      //파일 업로드 시 실행할 코드
      let file = event.target.files; //업로드한 파일 정보
      console.log(file)
    }
  },

이미지 가상 URL 생성

• URL.createObjectURL(): 이미지의 가상 URL을 생성해줌
• this.tabSelected = 1 다음(즉, 1) 페이지로 넘어감
• 업로드 -> 파일 정보로 이미지 가상 URL 생성 -> 다음 페이지로 넘어감

upload(event){
      //파일 업로드 시 실행할 코드
      let file = event.target.files; //업로드한 파일 정보
      console.log(file[0]) //파일 정보
      let imgUrl = URL.createObjectURL(file[0]); //파일 URL 생성
      console.log(url)
      this.tabSelected = 1; //다음 페이지로 이동
    }

props로 전달

• imgUrl을 props로 TheContainer에 전달하여 tabSelected가 1이 됐을 때 이미지가 보이도록 작업
• imgUrl을 스테이터스로 뺌

App.vue

data(){
     return {
      postData: PostData,
      linkNum: 0,
      tabs: ['탭1', '탭2', '탭3'],
      tabSelected: 0,
      imgUrl: '' //url 자리 만듦
    }
  },

upload(event){
      //파일 업로드 시 실행할 코드
      let file = event.target.files; //업로드한 파일 정보
      console.log(file[0]) //파일 정보
      this.imgUrl = URL.createObjectURL(file[0]); //파일 URL 생성
      console.log(this.imgUrl)
      this.tabSelected = 1; //다음 페이지로 이동
    }

<Container
    :postData="postData"
    :tabSelected="tabSelected"
    :imgUrl="imgUrl" /> //props로 url 전송

TheContainer.vue
props 저장 후

<div class="upload-image" :style="{ backgroundImage: `url(${imgUrl})` }"></div>

이미지 잘 보인드~~