Question

我在使用API在Laravel＆Vue.js网站上上传文件时遇到问题我得到-500服务器错误“ SyntaxError：JSON位置0中的意外令牌<” 我正在尝试在数据库中创建新值，为此，我使用带有图片上传功能的弹出式表单以及其他字段，例如用户名，电子邮件，电话等。我已经通过Postman测试了我的API-效果很好，但是当我尝试直接在我的网站上创建它时-它不起作用

您可以检查必须在DB中创建新值（启动）的函数：

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));

}

Laravel和Vue.js API文件上传不起作用

1 个答案: