Laravel Inertia Vue Precognition文件上传时其他字段失效问题排查

核心原因 #

出现这个问题的主要原因有两个：

1. 浏览器请求方法限制：HTML原生表单不支持PATCH方法的multipart/form-data请求，当你用patch方法提交带文件的表单时，Inertia模拟的PATCH请求会导致字段无法被Laravel正确解析，触发所有必填字段的验证错误。
2. Precognition验证规则冲突：预验证请求中，file字段为null，但你当前的规则里仍保留了file和mimes:pdf校验，这会干扰预验证逻辑，进而影响真实提交时的字段解析。

具体解决步骤 #

1. 统一请求方法，处理PATCH模拟请求 #

修改Vue中useForm的初始化逻辑，所有提交都用POST方法，更新场景下通过_method参数指定PATCH，适配浏览器的multipart请求限制：

const form = useForm(
    // 统一用POST方法
    "post",
    props.request
        ? route("requests.update", props.request)
        : route("requests.store"),
    {
        type: props.request ? props.request.type : null,
        aim: props.request ? props.request.aim : null,
        target_visitor: props.request ? props.request.target_visitor : null,
        location: props.request ? props.request.location : null,
        kumpulan: props.request ? props.request.kumpulan : null,
        ref_no: props.request ? props.request.ref_no : null,
        status_id: props.request ? props.request.status_id : null,
        user: props.request ? props.request.user : null,
        note: props.request ? props.request.note : null,
        file: null,
        // 更新场景添加_method参数模拟PATCH请求
        ...(props.request ? { _method: 'PATCH' } : {}),
    },
);

2. 修正FormRequest的文件验证规则 #

调整file字段的验证逻辑，确保Precognition预验证时跳过文件类型校验，真实提交时再强制执行规则：

return [
    'type' => 'required|in:Antidadah,Bas',
    'aim' => 'required|string',
    'target_visitor' => 'required|integer',
    'location' => 'required|string',
    'kumpulan' => 'required|string',
    'ref_no' => 'required|string',
    'status_id' => 'required|exists:statuses,code',
    'file' => [
        // 预验证时允许文件为空，不校验类型
        ...$this->isPrecognitive() ? ['nullable'] : ['required'],
        'nullable',
        'file',
        'mimes:pdf',
    ]
];

3. 检查表单绑定与提交逻辑 #

确保Vue模板中的文件输入框正确绑定到form的file字段：

<input type="file" @change="form.file = $event.target.files[0]" accept=".pdf" />

其他表单字段也要用v-model正确绑定，比如：

<select v-model="form.type">
    <option value="Antidadah">Antidadah</option>
    <option value="Bas">Bas</option>
</select>

提交时直接使用Inertia的form.submit()方法，让它自动处理multipart编码：

const submit = () => {
    form.submit({
        onSuccess: () => {
            // 成功回调逻辑
        },
        onError: () => {
            // 错误回调逻辑
        }
    });
};

4. 验证请求字段是否正常发送 #

提交表单时打开浏览器开发者工具，查看Network面板中请求的Form Data部分，确认type、aim等所有必填字段都已正确发送到服务器。如果字段缺失，检查表单绑定是否有误。

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