willaengine/resources/js/Global/components/Inputs/UploadImage.vue

<template>
    <div class="upload-example">
        <img class="upload-example-cropper" width="220px" height="220px" :src="media"/>
        <div class="button-wrapper">
            <v-btn
                large
                :color="$_color('product_option')"
                @click.native="$refs['image_'+uniqueId].click()"
                light
            >
                <input
                    type="file"
                    :ref="'image_'+uniqueId"
                    :name="'image_' + uniqueId"
                    v-show="false"
                    @change="uploadImage($event)"
                    accept="image/*"
                />
                <v-icon dark>WMi-upload</v-icon>
                آپلود عکس
            </v-btn>
        </div>
    </div>
</template>
<script>
    import {makeid} from '@Global/utils/common/math'

    export default {
        props: {
            batch_id: {default: null, type: String},
            media: {default: '', type: String},
        },
        data: () => ({
            uniqueId: Math.floor(Math.random() * 10000),
        }),
        methods: {
            uploadImage(event) {
                // Reference to the DOM input element
                var input = event.target;
                // Ensure that you have a file before attempting to read it
                if (input.files && input.files[0]) {
                    let formData = new FormData();
                    formData.append('file', input.files[0]);
                    formData.append('batch_id', this.batch_id  ? this.batch_id : makeid(50));
                    this.$emit('before');
                    this.$axios.post(this.$_url('storeFile'), formData).then((response) => {
                        this.$emit('after');
                        this.$emit('uploaded', response.data.data)
                    }).catch( error => {
                        this.$emit('after');
                        this.$emit('error', error);
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    /*.upload-example-cropper {*/
    /*    margin: 0 auto;*/
    /*    border: solid 1px #d2d2d2;*/
    /*    height: 220px;*/
    /*    width: 220px;*/
    /*    border-radius: 5px;*/
    /*}*/
</style>