Laravel+Inertia React文章编辑上传图片失败问题求助

1. 前端必须用FormData并开启multipart模式 #

Inertia处理文件上传时，不能直接传普通JSON，必须封装成FormData，同时开启multipart: true配置。

错误示例（未正确处理文件） #

const submit = () => {
  Inertia.put(`/articles/${article.id}`, {
    title: form.title,
    content: form.content,
    image: form.image // 直接传文件对象，未封装为FormData
  })
}

正确写法（手动封装FormData） #

const submit = () => {
  const formData = new FormData()
  formData.append('title', form.title)
  formData.append('content', form.content)
  if (form.image) {
    formData.append('image', form.image) // 字段名需和后端接收名完全一致
  }

  Inertia.put(`/articles/${article.id}`, formData, {
    multipart: true, // 关键配置：启用multipart处理
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

用Inertia useForm钩子简化写法 #

const { data, put } = useForm({
  title: article.title,
  content: article.content,
  image: null
})

const submit = () => {
  put(`/articles/${article.id}`, {
    multipart: true // 开启multipart即可自动处理FormData
  })
}

2. 后端Controller需正确处理文件上传逻辑 #

确保验证规则包含文件可选配置，且处理文件时避免覆盖原有数据：

public function update(Request $request, Article $article)
{
    // 验证规则：image字段可选，限制文件类型和大小
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'content' => 'required|string',
        'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
    ]);

    // 处理上传文件：仅当有新文件时更新
    if ($request->hasFile('image')) {
        // 可选：删除旧文件避免冗余
        if ($article->image) {
            Storage::delete('public/articles/' . $article->image);
        }
        $validated['image'] = $request->file('image')->store('articles', 'public');
    } else {
        // 无新文件时，移除image字段，避免将原有值置空
        unset($validated['image']);
    }

    $article->update($validated);

    return redirect()->route('articles.index')->with('success', '文章更新成功');
}

3. 解决PUT/PATCH请求不支持multipart的问题 #

Laravel默认PUT/PATCH请求无法直接接收multipart数据，可通过POST请求模拟PUT：

前端修改 #

formData.append('_method', 'PUT')
Inertia.post(`/articles/${article.id}`, formData, {
  multipart: true
})

后端路由保持PUT配置 #

Route::put('/articles/{article}', [ArticleController::class, 'update'])->middleware('web');

4. 查看具体错误信息定位问题 #

打开浏览器开发者工具（F12）→ 切换到Network标签，提交带图片的表单后，查看对应请求的Response/Preview标签，Laravel会返回具体错误（比如验证失败、文件权限不足、大小超出限制等），这是最快定位问题的方式。

5. 确保文件存储目录权限正确 #

检查Laravel的storage/app/public/articles目录是否存在，Linux系统需设置权限为755：

chmod -R 755 storage/app/public

Windows系统需确保目录有写入权限。

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