Modulo vue para subir imagen

photo-uploader.js

export default {
    data: function () {
        return {
            imageFile: null,
            result: null,
            error: null,
            loading: false,
            verbose: true,
        }
    },
    computed: {
        fileData: function () {
            if (!this.imageFile) {
                return null;
            }
            return {
                name: this.imageFile.name,
                size: this.imageFile.size,
                type: this.imageFile.type,
            };
        },
        filename: function () {
            return this.imageFile ? this.imageFile.name : '';
        },
        imageSrc: function () {
            return this.imageFile ? URL.createObjectURL(this.imageFile) : '';
        }
    },
    props: ['uploadUrl', 'authorization', 'className', 'initVerbose'],
    mounted: function () {
        if (this.initVerbose) {
            this.verbose = this.initVerbose === 'false' ? false : true;
        }
    },
    methods: {
        _upload: async function (data) {
            const url = this.uploadUrl;
            const headers = {
                Authorization: this.authorization
            };
            const method = 'POST';
            let result;
            try {
                const onUploadProgress = progressEvent => {
                    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                    console.log(percentCompleted);
                };
                // console.log({ url, method, headers, data });
                const _result = await axios({ url, method, headers, data, onUploadProgress });
                if (_result.statusText === 'OK') {
                    result = _result.data;
                }
                return result;
            } catch (error) {
                throw error;
            }
        },

        upload: async function () {
            this.result = null;
            this.error = null;
            this.loading = true;
            try {
                const formData = new FormData();
                formData.append('photo', this.imageFile, this.imageFile.name);
                const result = await this._upload(formData);
                this.result = result;
                this.$emit('onsuccess', result);
                this.imageFile = null;
                this.loading = false;
            } catch (error) {
                console.log(error);
                this.error = error;
                this.loading = false;
            }
        },

        fileChange: function (event) {
            this.imageFile = event.target.files[0];
            // console.log(this.imageFile);
        },
    },
    template: `<div class="upload-component" :class="className">
        <form>
            <div class="input-group form-row m-0">
                <div class="custom-file">
                    <input type="file" accept="image/*" class="custom-file-input" id="uploaderFile" :name="filename" :disabled="loading" @change="fileChange">
                    <label class="custom-file-label" for="uploaderFile">Archivo de imagen</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button" :class="{'btn-success': result, 'btn-danger': error}" @click="upload" :disabled="loading">Subir</button>
                </div>
            </div>
            <pre class="mt-1 mb-1 p-2 bg-secondary text-white" v-show="verbose && fileData">{{ fileData }}</pre>
            <img class="img-fluid" :src="imageSrc">
            <div class="result" v-show="verbose">
                <div class="loading" v-if="loading">Cargando...</div>
                <pre class="mt-1 p-2 bg-dark text-white" v-if="result">{{ result }}</pre>
                <pre class="mt-1 p-2 bg-dark text-white" v-if="error">{{ error }}</pre>
            </div>
        </form>
    </div>`
};