Laravel 6 с помощью Ax ios для загрузки изображения с помощью vuejs -clipper

Question

Я хочу реализовать функцию для загрузки обрезанной фотографии профиля, используя vuejs -clipper . Я получил набор внешнего интерфейса, который использует clipper-upload & clipper-fixed для загрузки и просмотра / обрезки изображения. Что я ожидаю, если обрезанное изображение будет загружено как фотография профиля.

Но когда я попытался отправить свою форму, файл изображения не был отправлен, и я думаю, что это из-за ввода в clipper-upload ' Шаблон s не имеет атрибута name. Я попытался снова после добавления вручную атрибута name в файл, введенный через веб-инспектор, который получил и обновил фотографию профиля пользователя.

Проблема заключается в том, что загруженное изображение не обрезается, а весь образ. Поэтому я подумал об использовании Ax ios для публикации изображения, которое я затем получил сообщение об ошибке 405 (метод не разрешен). Даже если сообщение может работать в Ax ios, я упал, как будто загруженное изображение по-прежнему целиком (не обрезано), так как я выбрал элемент по id и извлек его содержимое.

Как я могу загрузить обрезанную фотографию, используя vuejs -clipper? Предпочтительно использовать решения Laravel и Vue без Ax ios, если это возможно, потому что я хочу что-то сделать с файлом в контроллере Laravel.

Модальное фото профиля - Laravel Blade

<div id="vue-profilePhotoUpload" class="modal-content">
    <form action="{{action('DashboardTalentController@profilePhoto', $user->talent->id)}}" method="post"
        enctype="multipart/form-data">

        @csrf
        @method('PUT')

        <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">Update Your Profile Picture</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body" id="vue-profilePhoto">
            <clipper-upload id="clipperUpload" v-model="imgURL" class="btn btn-secondary mb-2" :check=true>upload image
            </clipper-upload>
            <clipper-fixed class="my-clipper" :src="imgURL">
                <div class="placeholder" slot="placeholder">No image</div>
            </clipper-fixed>
        </div>

        <div class="modal-footer">
            <button id="vue-profilePhotoUploadBtn" type="button" v-on:click="uploadImage"
                class="btn btn-primary">Upload</button>
        </div>
        {!! Form::close() !!}
</div>

Фотография профиля - JavaScript

    import Vue from "vue";
    import VuejsClipper from "vuejs-clipper";
    import VueRx from "vue-rx";

    Vue.use(VuejsClipper, {
        components: {
            clipperBasic: true,
            clipperPreview: true,
            clipperFixed: true,
            clipperUpload: true
        }
    });
    Vue.use(VueRx);

new Vue({
    el: "#vue-profilePhotoUpload",
    data: {
        imgURL: '',
    },
    methods: {
        getResult: function () {
            const canvas = this.$refs.clipper.clip(); //call component's clip method
            this.resultURL = canvas.toDataURL("image/jpeg", 1); //canvas->image
        },
        'uploadImage': function () {
            document.getElementById('vue-profilePhotoUploadBtn').onclick = function () {
                var data = new FormData()
                var imageInput = document.getElementById('clipperUpload').lastChild
                var uploadImage = imageInput.files[0]
                data.append('file', uploadImage)

                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                axios.post('/talent/dashboard/1/profilephoto', data, config).then(function (response) {
                    console.log(response.data);
                }).catch(function(err) {console.log(err)});
            }
        }
    }
});