Получение пустого массива при загрузке файла с vuejs и axios в laravel

Question

Я пытаюсь загрузить изображение, следуя этой ссылке от Yubaraj , но после отправки файл изображения является пустым объектом.

Из которых, согласно Юбараю, на самом деле то, что вам следуетпоставить сервер.

На самом деле он скрывает обычный текстовый файл за текстовым полем и получает данные с событием.

Ниже приведен фрагмент двух событий:

pickFile () {
            this.$refs.image.click ()
        },

        onFilePicked (e) {
            const files = e.target.files
            if (files[0] !== undefined) {
                this.form.imageName = files[0].name
                if (this.form.imageName.lastIndexOf('.') <= 0) {
                    return
                }

                const fr = new FileReader();
                fr.readAsDataURL(files[0]);
                fr.addEventListener('load', () => {
                    this.form.imageUrl = fr.result;
                    this.form.imageFile = files[0] // this is an image file that can be sent to server...
                })
            } else {
                this.form.imageName = '';
                this.form.imageFile = '';
                this.form.imageUrl = '';
            }
        },

Когда я записываю на консоль журнал form.image.file и файл, это то, что я получаю из консоли браузера:

с использованием поста vform, который фактически использует аксио за кулисами.this.form.post (route ('api.settings.branch.create'), this.form)

изображение результата dd () из вкладки сети в браузере: очень много текста есть dataurl изображения