Vue + Laravel, input file component 를 부모 component에서 사용하기

Laravel 환경에서 Form template 아래에 ImageUpload template를 만들고 비동기 통신 테스트 예제 소스

ImageUpload.vue

- input file과 image preview를 할 수 있는 template.

- $.emit을 이용해 form emplate에 파일 정보를 넘겨준다.

<template>

    <div>

        <input type="file" v-on:change="onFileChange" class="form-control mb-4">

        <img :src="image" class="img-responsive">

    </div>

</template>

<script>

    export default{

        data(){

            return {

                image: ''

            }

        },

        methods: {

            onFileChange(e) {

                let files = e.target.files || e.dataTransfer.files;

                if (!files.length)

                    return;

                this.createImage(files[0]);

            },

            createImage(file) {

                let reader = new FileReader();

                let vm = this;

                reader.onload = (e) => {

                    vm.image = e.target.result;

                    vm.$emit('input', vm.image)

                };

                reader.readAsDataURL(file);

            }

        }

    }

</script>

Add.vue

- Form template.

- input box와 위에 만들어준 image-upload에 v-model을 적용.

- 전송은 axios를 이용.

<template>

<form id="">

    <div class="form-group">

        <label for="name">이름</label>

        <input type="name" class="form-control mb-4" id="name" v-model="storeData.name">

    </div>

    <div class="form-group">

        <label for="addr">주소</label>

        <input type="addr" class="form-control mb-4" id="addr" v-model="storeData.addr">

    </div>

    <div class="form-group">

        <label for="">Example file input</label>

        <image-upload v-model="storeData.backImage"></image-upload>

    </div>

    <div class="form-group">

        <label for="">Example file input</label>

        <image-upload v-model="storeData.detailImage"></image-upload>

    </div>

    <button type="button" class="btn btn-primary" id="" @click.prevent="addStore()">저장하기</button>

</form>

</template>

<script>

    export default{

        data(){

            return {

                storeData:{

                    name:'',

                    addr:'',

                    backImage:'',

                    detailImage:''

                }

            }

        },

        methods: {

            addStore() {

                let vm = this

                axios.post('/store/register', vm.storeData)

                    .then(response => {

                        console.log(response);

                    })

                    .catch(error => {

                        console.log(error);

                    });

            }

        }

    }

</script>

App.js

- component 추가

// 추가

Vue.component('image-upload',require('./components/ImageUpload.vue'));

Vue.component('add-form', require('./components/Add.vue'));

원하는 blade

<add-form></add-form>