如何将Vue前端上传的文件正确传递到Laravel控制器并成功获取？

你当前的写法是将File对象直接放在普通JavaScript对象中传递给axios，axios默认会将请求体序列化为JSON格式，而文件上传必须使用multipart/form-data编码的FormData格式传输，因此Laravel无法识别到上传的文件字段。你之前手动设置Content-Type但没搭配FormData使用，自然没有效果。

1. 构造FormData对象 #

在Vue侧组装请求参数时，必须使用FormData实例，需要把文件本身追加到FormData中，不能只传文件名：

const formData = new FormData();
// 追加文件本身，字段名对应后端要取的file
formData.append('file', this.form.file);
// 其他普通字段也可以直接追加
formData.append('document_type', this.form.document_type);
formData.append('name', this.form.file.name);
// 把组装好的formData传给store
this.$store.dispatch('uploadDocument', formData)

2. 调整Store中axios请求逻辑 #

直接传入FormData实例即可，不需要手动设置Content-Type，axios会自动生成带boundary标识的multipart/form-data请求头，手动设置反而可能因为缺失boundary导致解析失败：

axios.post('/users/newDocument', formData)

3. Laravel控制器中获取数据 #

普通字段用$request->get()获取，上传的文件需要用$request->file()方法获取，校验文件是否上传成功用$request->hasFile('file')：

public function store(Request $request)
{   
    // 校验文件是否存在
    if ($request->hasFile('file')) {
        // 获取上传的文件实例
        $file = $request->file('file');
        // 获取普通字段
        $documentType = $request->get('document_type');
        $fileName = $request->get('name');
        // 后续文件存储、业务逻辑处理
    }
}

内容的提问来源于stack exchange，提问作者jkstallard