[Vue] 이미지 업로드 및 불러오기

이미지 업로드한 것을 HTML에 보여주려면 두가지 방법이 있다.

FileReader() : 파일을 글자로 변환해준다.

URL.createObjectURL() : 이미지의 가상 URL을 생성해준다. (다만 새로고침하면 사라진다.)

=> background-image속성으로 집어넣으면 된다.

 

multiple을 넣으면 다수의 파일을 선택할 수 있다.

accept="image/*"를 넣으면 이미지 파일을 가져올 수 있게 기본으로 설정된다.

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

 

var file = e.target.files;

file[0].type과 같이 자바스크립트에서 .type 사용하면 image/png 와 같이 확장자 검사가 가능하다.

조건문을 사용해 일부 확장자만 가능하게끔 설정을 해주면 된다.

 

App.vue

<template>
  <Container :image="image" />
</template>

<script>
import Container from './components/Container.vue';
axios.post()

export default {
  name: 'App',
  data(){
    return {
      image : '',
    }
  },
  components: {
    Container,
  },
  methods: {
    upload(e){
      var file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.image = url;
    },
  },
}
</script>

URL.createobjectURL로 불러온 것을 image라는 변수에 넣은 뒤 Container 컴포넌트에 보내준다.

 

반응형

 

Container.vue

<template>
  <div>
    <div v-if="step==0">
        <Post v-for="(a,i) in instaData" :key="i" :instaData="instaData[i]" />
    </div>

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

    <!-- 글작성페이지 -->
    <div v-if="step==2">
        <div class="upload-image" :style="`background-image : url(${image})`"></div>
        <div class="write">
            <textarea @input="$emit('write', $event.target.value)" class="write-box">write!</textarea>
        </div>
    </div>
  </div>
</template>

<script>
import Post from './Post.vue';
import FilterBox from './FilterBox.vue';
export default {
    props : {
        instaData : Array,
        step : Number,
        image : String,
    },
    components: {
        Post,
        FilterBox,
    }
}
</script>

Container에서 props를 통해 image를 데려온 뒤 :style="`background-image : url(${image})`"로 이미지를 출력할 수 있다.