[Vue.js] 16. 서버없이 이미지 업로드

이미지 업로드 한 걸 HTML에 보여주는 방법 두가지

1. FileReader() - 파일을 글자로 변환
2. URL.createObjectURL() - 이미지의 가상 URL을 생성

 

* 이미지는 원래 0과 1로 이뤄진 binary 데이터임. binary 데이터를 다룰 때 BLOB라는 object에 담아서 다룸

 

 

ex) 파일 업로드 후 다음페이지로 이동 - 이동한 페이지에 업로드한 이미지 띄우기

<!-- App.vue -->
<template>
    <Container :postData="postData" :step="step" :image="image" />
    <div class="footer">
        <ul class="footer-button-plus">
            <!-- multiple: 다중선택 / accept="image/*": 이미지 선택을 기본으로 -->
            <input @change="upload" accept="image/*" type="file" id="file" class="inputfile" />
            <label for="file" class="input-plus">+</label>
        </ul>
    </div>
</template>

<script>
import Container from './components/Container.vue';
import postData from './data/postData';
export default {
    name: 'App',
    data() {
        return {
            ...
            step: 0,
            image: '',
        };
    },
    methods: {
        upload(e) {
            let file = e.target.files;
            console.log(file[0]);
            console.log(file[0].type); // 이미지 타입
            let url = URL.createObjectURL(file[0]); // 가상의 이미지 URL 생성
            console.log(url);
            this.image = url;
            this.step++; // 다음 페이지로 이동
        },
    },
    ...
};
</script>

 

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

<script>
import Post from './Post.vue';
export default {
    name: 'Container-component',
    props: {
        postData: Array,
        step: Number,
        image: String,
    },
    components: { Post },
};
</script>

<style>
.upload-image {
    width: 100%;
    height: 450px;
    background: cornflowerblue;
    background-size: cover;
}
</style>