Laravel+Inertia含文件上传的更新处理器无法正常工作

核心问题定位 #

当上传图片时触发title和content必填验证，说明服务端未接收到这两个字段的数据——仅修改文本时正常，是因为此时请求是普通JSON格式，字段能正确传递；而带文件上传时，请求格式变为multipart/form-data，如果数据传递方式错误，就会导致文本字段丢失。

第一步：新手必备的服务端调试操作 #

在update方法开头添加调试代码，确认服务端实际接收到的内容：

public function update(Request $request, Post $post)
{
    // 打印所有请求数据与文件信息，执行后会终止程序并展示结果
    dd($request->all(), $request->files);
    
    // 原验证逻辑...
}

提交带图片的表单后，就能直观看到服务端是否真的收到了title、content和image，这是排查问题的关键第一步。

解决方案一：修复手动构建FormData的错误 #

你尝试的第三种方法中，没有把构建好的FormData对象作为请求数据传递，这是致命错误。修改后的代码如下：

const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("title", data.title);
    formData.append("content", data.content);
    if (data.image) {
        formData.append("image", data.image);
    }
    // 关键：把formData作为第二个参数传递给patch方法
    patch(route("posts.update", post.id), formData, { forceFormData: true });
};

解决方案二：用Inertia useForm原生处理文件（更简便） #

Inertia的useForm已原生支持文件上传，无需手动构建FormData，只需开启forceFormData并确保表单格式正确：

const { data, setData, put, processing, errors } = useForm({
    title: post.title,
    content: post.content,
    image: null,
});

const handleSubmit = (e) => {
    e.preventDefault();
    // 直接传递useForm的data，开启forceFormData强制使用表单格式
    put(route("posts.update", post), data, { forceFormData: true });
};

同时在表单标签上显式声明格式：

<form @submit.prevent="handleSubmit" enctype="multipart/form-data">
    <!-- 标题输入框、内容编辑器、文件上传框等表单元素 -->
</form>

额外注意事项 #

• Laravel资源路由的update方法默认接受PUT或PATCH请求，两种方式均可，无需纠结。
• 确保文件上传输入框的绑定正确：比如Vue3中用v-model:file="data.image"，确保data.image是有效的File对象。

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