Загрузка файла API Laravel & Vue.js не работает

Question

У меня проблема с загрузкой файлов на мой веб-сайт Laravel & Vue.js с использованием API, который я получаю - 500 Ошибка сервера "SyntaxError: Неожиданный токен <в JSON в позиции 0" Я пытаюсь создать новое значение в моей базе данных, для этогоЯ использую всплывающую форму с загрузкой изображений и другими полями, такими как имя пользователя, адрес электронной почты, телефон и т. Д. Я проверил мой API через Postman - он работает нормально, но когда я пытаюсь создать его непосредственно на моем веб-сайте - он не работает </p>

Вы можете проверить функцию, которая должна создать новое значение (запуск) в БД:

createStartup() {
            fetch('/api/startup', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data'
                },
                body: JSON.stringify(this.new_startup),
            })
                .then(res => res.json())
                .then(res => {
                    $('#createStartUp').modal('hide');
                    alert('New Startup Created!');
                    // this.fetchStartups();
                })
                .catch(err => console.log(err));
}

Я думаю, что проблема в Заголовках (я не использовал Заголовки в Почтальоне), когда япытался не использовать какие-либо заголовки - он тоже не работал, также O пытался использовать Content-Type с обходом, и, к сожалению, он не работал

Также я думаю, что это должно быть полезно - как я получаю изображение вvue.js:

HTML:

<input id="upload_create" class="file-upload_input" type="file" @change="onFileSelected" >

JS (Vue.js):

onFileSelected(event) {
    this.new_startup.startup_logo = event.target.files[0];
}

Большое спасибо, ребята, за любые идеи и помощь!

Answer 1

Вам необходимо передать свои данные в виде данных формы.Вот как мне удалось отправить файл загрузки через Vue.js:

 createStartup() {
        let formData = new FormData();
        formData.append('file', this.new_startup.startup_logo);
        formData.append('anythingElse', JSON.stringify(this.someVariable);
        // ... etc
        fetch('/api/startup', {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            body: formData,
        })
            .then(res => res.json())
            .then(res => {
                $('#createStartUp').modal('hide');
                alert('New Startup Created!');
                // this.fetchStartups();
            })
            .catch(err => console.log(err));

}