无法使用Vue前端和laravel服务器上传文件

Question

我正在尝试上传一个文件(文件可以是任何东西，即图像、pdf或文档，绝对是任何东西(。为此，我在低于的Vue组件中制作了一个测试表格

<form class="mt-5" method="post" enctype="multipart/form-data" id="uploadForm">
<div class="form-group">
<input type="file" id="test" name="test" class="form-control">
</div>
<button @click.prevent="uploadFile" type="button" class="btn btn-sm btn-primary">Upload</button>
</form>

现在，当我提交表单(点击上传按钮(时，我正在下面运行一个功能

uploadFile() {
let something = $('#test').prop('files')[0];
console.log(something);
let form_data = new FormData();
form_data.append('file', something);
console.log(form_data);
axios.post('/upload/file', { form_data })
.then(() => {
console.log("done");
})
},

因此，当我console.log(something)时，它会向我显示上传文件的信息，但当我使用axios和dd($request->all())向服务器发送数据时，它向我显示something => []是一个空数组，这意味着我没有得到文件，因此无法进一步处理它以将其保存到我的文件夹中(上传(。

我在这里做错了什么？

Answer 1

之所以会发生这种情况，是因为在使用axios进行请求时，您没有将头Content-Type设置为multipart/form-data(默认情况下使用application/json(，并且enctype属性没有效果，因为您没有使用默认的表单提交操作。因此，尝试在post方法中传递第三个参数，指定正确的Content-Type标头。

const uploadAvatar = ({ id, file }) => {
const formData = new FormData();
formData.append('avatar', file);
return axios.post(`users/${id}/avatar`, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
};