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

이미지업로드 한걸 html에 보여주려면

FileReader()을 쓰거나 URL.createObjectURL()을 사용하면 된다.

<div class="footer">
    <ul class="footer-button-plus">
      <input @change="upload" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>

이렇게 input태그로 type이 file이 되게 만들고, label태그를 이용해서 +를 누르면 사진을 업로드 할 수 있게 만들고, change 즉 변화가 감지되면 upload함수를 실행하게 한다.

upload(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0])
      this.step++;
      this.이미지 = url;
}

e.target.files로 업로드 된 파일들을 file변수에 담아주고, step++로 step을 1더해 탭을 이용한 페이지변경을 해준다.

그리고, url이라는 변수에 URL.createObjectURL함수를 사용해서 file의 첫번째의 url을 담아주고, 이미지라는 데이터에 url을 넣어준다.

<div class="upload-image" :style="`background-image:url(${이미지})`"></div>

그리고 위처럼, 이미지를 백그라운드 이미지의 url에 넣어주면 된다.