[Vue.js] 서버 없이 업로드한 이미지 다루기

💡 실습 포인트!

---

💜 파일 업로드 시 코드 실행하기

• Vue 는 웹브라우저 다루는 것을 도와주는 도구일뿐이므로, 실질적으로 웹 개발을 잘 하기 위해서는 Vue 문법뿐만 아니라 웹브라우저의 기능들을 많이 알아야 한다.
• 예전에는 사용자가 업로드한 이미지를 서버로 보내서 저장하고, 저장한 이미지 URL 을 다시 사용자에게 보낸 다음 <img src=""> 에 넣어서 보여주는 등 과정이 복잡하여 바로 브라우저에 반영하여 보여주는 게 어려웠다.
• 하지만 IE11 이상에서는 브라우저 내에서 직접 이미지를 조작하는 것이 가능해졌는데 대표적으로 두가지 방법이 있다.
  • FileReader() 를 사용하기
    : 이미지를 글자로 변환할 수 있고, 변환된 글자는 어딘가에 저장하거나 사용하는 것이 가능하다.
  • URL.createObjectURL() 을 사용하기
    : 이미지 URL 을 잠깐 생성해준다. (단, 새로고침하면 사라진다.)

---

💜 URL.createObjectURL() 사용해보기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="header">
    <ul class="header-button-left">
      <li v-if="step === 1 || step === 2" @click="step = 0">Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li @click="step++" v-if="step === 1">Next</li>
      <li v-if="step === 2">발행</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container :posts="posts" :step="step" :imgUrl="imgUrl" />

  <button class="btn" @click="more" v-if="step === 0">더보기</button>

  <div class="footer" v-if="step === 0">
    <ul class="footer-button-plus">
      <input @change="uploadImg" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import posts from "./assets/posts";
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      posts: posts,
      moreCnt: 0,
      step: 0,
      imgUrl: "",
    };
  },
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
    uploadImg(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.imgUrl = url;
      this.step++;
    },
  },
  components: {
    Container: Container,
  },
};
</script>

<style>
</style>

 

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

• "+" 버튼을 눌러서 파일을 선택해서 <input /> 에 변화가 발생하면 uploadImg 라는 함수가 실행되게 해주었다.

 

  methods: {
    uploadImg(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.imgUrl = url;
      this.step++;
    }
  }

• 이제 위의 uploadImg 함수를 methods 에 작성해주면 된다.
• 파일이 업로드할 때 e.target.files 라는 코드를 활용하면 업로드한 파일들의 리스트를 알 수 있으며, 나의 경우 이를 file 이라는 변수에 담아주었다.
• 파일 하나만 올려도 array 자료형으로 만들어주므로 업로드한 파일이 하나인 경우 혹은 첫번째 파일만 임의의 url 이 필요한 경우, 위와 같이 URL.createObjectURL(file[0]) 형태의 코드를 작성하면 임의의 url 이 생성된다.
• 그리고 이 과정에서 생성된 url 은 Container.vue 에서 사용해야 하므로, data 보관함에 imgUrl 이라는 항목을 만들어준 후에 uploadImg() 에서 임의로 생성된 url 을 imgUrl 에 저장해주었다.
• 위의 작업이 끝나면 메인 페이지(step : 0)에 그대로 남아있는 게 아니라 필터 선택 페이지(step: 1)로 넘어가야 하므로 step 값을 +1 해주었다.
• 이제 생성된 url 이 저장된 imgUrl 을 imgUrl 이라는 이름으로 props 문법을 통해 Container.vue 로 전송해주면 Container.vue 에서 imgUrl 을 사용할 수 있게 된다.

---

💜 생성된 임시 URL 데이터바인딩하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div>
    <div v-if="step === 0">
      <Post :post="post" v-for="(post, i) in posts" :key="i" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step === 1">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="filters">
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step === 2">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="write">
        <textarea class="write-box">write!</textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
export default {
  name: "Container",
  data() {
    return {};
  },
  components: {
    Post: Post,
  },
  props: {
    posts: Array,
    step: Number,
    imgUrl: String,
  },
};
</script>

<style>
</style>

• App.vue 로부터 props 문법으로 전달받은 imgUrl 을 props 에 등록해준 다음, <template></template> 내에서 필요한 부분에  style 의 background-image 속성으로 데이터바인딩해주었다.