addItemForm.vue

<template>
    <div class="addItem">
        <input type="text" v-model="item.name" />
        <input type="file" @change="onChange" accept="image/jpeg,image/gif,image/png" />
        <img id="image" :src="item.image" alt="uploadimage" :class="[ item.image ? 'show' : 'hide']">
        <button
            @click="addItem()"
            class="btn btn-danger btn-sm align-middle" v-bind:disabled="item.name === ''">
            <i class="fas fa-plus"></i> ADD
        </button>
    </div>
</template>
<script>
export default {
    data: function () {
        return {
            item: {
                name: "",
                image: ""
            }
        }
    },
    methods: {
        onChange(e) {
            let imgfile = e.target.files[0];
            this.getBase64Img(imgfile);
        },
        getBase64Img(imgfile) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.item.image = e.target.result;
                console.log(this.item.image);
            };
            reader.readAsDataURL(imgfile);
        },
        addItem() {
            let headers = {
                    'headers': {
                        'Content-Type': 'application/json;charset=utf-8',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.token
                    }
                };
            if( this.item.name == '' ) return;
            axios.post('api/item/store', {
                item: this.item
            }, headers)
            .then( response => {
                if( response.status == 201 ) {
                    this.item.name = "";
                    this.$emit('reloadlist');
                }
            })
            .catch(error => {
                console.log(error);
            })
        }
    }
}
</script>
<style scoped>
.addItem {
    display: flex;
    justify-content: center;
    align-items: center;
}
input {
    background: #f7f7f7;
    border: 0px;
    outline: none;
    padding: 5px;
    margin-right: 10px;
}
.plus {
    font-size: 30px;
}
.active {
    color: #00ce25;
}
.inactive {
    color: #999999;
}
#image {
    max-width: 100px;
    max-height: 100px;
}
.hide { display: none; }
.show { display: inline; }
</style>