как отправить изображение с vuejs на laravel сервер для загрузки

Question

это моя форма

 <div class="modal" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h5 class="modal-title">Upload 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">
                    <div class="form-group">
                        <div class="row">
                        <div class="col-6">
                            <label>Profile Picture</label>

                            <input ref="image"  id="image" type="file" name="image" accept="image/*" class="form-control" style="border: none" @change="loadImage($event)">
                        </div>
                        <div class="col-6">
                            <img :src="this.image_file" class="uploading-image img-thumbnail" height="128" alt="Preview" />
                        </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" @click="submitImage">Upload <i class="fas fa-user-plus"></i></button>
                </div>

            </div>
        </div>
    </div>

этот метод запускается, когда я выбираю изображение, чтобы я мог просмотреть перед загрузкой, он также сохраняет изображение в созданной мной переменной

loadImage(e){

            this.file = e.target.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(this.file);
            reader.onload = e =>{
            this.image_file = e.target.result;

            };
            console.log(this.file);
        },

приведенный выше код работает отлично и может предварительно просмотреть изображение

это мои переменные

formData: new FormData(),

            file: null,
            image_file: '',

этот код обрабатывает отправку запроса на сервер с помощью ax ios

submitImage(){


            this.formData.append('image', this.file, this.file.name);



            console.log(this.formData);


            axios.put( '/data/profile/image',
                this.formData,
                {
                    headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                },

            ).then(function(response){
                Fire.$emit('profileUpdate');
                console.log(response.data);

                swal.fire(
                    'Update',
                    'Profile Picture Updated Successfully',
                    'success'
                );

            })
                .catch(function(error){
                    console.log(error.data);
                });
            $('#profileModal').modal('hide');
        },

это моя laravel серверная часть, просто проверяю, есть ли в запросе файл

public function uploadImage(Request $request){
    if($request->hasfile('image')){
        return "Yes";
    }
    else{return "No";}
}

приведенный выше код возвращает ' NO ', то есть нет файла, прикрепленного к форме Data

пожалуйста, есть что-то, что я не правильно делаю?

Answer 1

Laravel имеет проблему с получением данных формы из ajax запросов с использованием HTTP VERB PUT, попробуйте то же самое, используя вместо этого POST.

Ссылки: https://github.com/laravel/framework/issues/13457