React向Laravel后端上传文件时无法获取文件的问题咨询

嘿，我帮你找到问题根源了！你现在的核心问题是没有用原生FormData对象来封装文件和表单数据——直接把文件放到普通JS对象里传给axios，它会默认把数据序列化为JSON格式，而文件根本没法被JSON序列化，所以Laravel后端自然收不到任何文件数据。

具体修改步骤 #

1. 重构React端的提交逻辑

把你的submitForm方法改成这样，用原生FormData来包装所有表单数据：

submitForm = () => {
  // 创建真正的FormData实例
  const formData = new FormData();
  
  // 遍历原状态中的所有表单字段，逐个添加到FormData里
  Object.keys(this.state.formData).forEach(key => {
    formData.append(key, this.state.formData[key]);
  });

  // 可以用这个方式验证文件是否被正确添加
  console.log("上传的文件：", formData.get('invoice'));

  axios.post(`items/edit/${this.itemId}`, formData, {
    headers: {
      // 如果你的Laravel路由是web路由（非api路由），必须带上CSRF令牌
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
    }
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error("上传失败：", error);
  });
}

2. 为什么原来的写法不行？

你之前的代码是把文件放到普通的JS对象{ ...this.state.formData }里，axios会自动把这个对象转成JSON字符串发送，但文件File对象是无法被JSON序列化的，最终发送到后端的只是一个空对象或者[object File]这样的无效字符串，所以Laravel的$request->file('invoice')自然返回null。

而原生FormData对象会按照multipart/form-data的标准格式来编码数据，这是HTTP协议中上传文件的唯一正确方式，Laravel也能正确解析这种格式的请求。

Laravel端的注意事项 #

• 确保你的路由是POST请求（你代码里的items/edit/${this.itemId}看起来是编辑接口，通常Laravel会用PUT或PATCH，但如果是POST也没问题，只要路由配置正确）。
• 如果是api路由，需要确认你的api中间件组没有阻止multipart/form-data请求（默认是允许的）。
• 可以在Laravel控制器里先打印整个请求的内容来验证：

dd($request->all()); // 看看是否能看到invoice字段
// 再获取文件
$invoice = $request->file('invoice');
dd($invoice);

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