React中Formik文件上传至Laravel后端异常：无法传递CV文件

看起来你遇到的问题是Formik默认的表单提交逻辑不支持文件上传——因为Formik会把表单数据序列化为JSON，但文件对象无法被JSON序列化，所以后端收到的就是空值。下面分前端（Formik部分）和后端（Laravel部分）给出具体解决方案：

前端Formik调整 #

1. 正确处理文件输入的 onChange 事件 #

Formik的默认handleChange无法处理file类型的输入，你需要手动用setFieldValue把选中的文件存入Formik的values中：

<label className="btn btn-info" htmlFor="cv">
  上传CV
  <input 
    id="cv" 
    name="cv" 
    style={{display: 'none'}} 
    type="file" 
    onChange={(e) => {
      // 取第一个选中的文件（如果允许多选可以用files数组）
      formik.setFieldValue('cv', e.target.files[0]);
    }}
  />
</label>
{/* 可选：显示已选中的文件名 */}
{formik.values.cv && <p className="mt-2">已选择：{formik.values.cv.name}</p>}

同时记得在Formik的initialValues里把cv初始化为null：

initialValues={{
  // 其他表单字段
  cv: null,
}}

2. 用FormData替代JSON提交表单 #

文件上传必须使用multipart/form-data格式，所以在onSubmit函数里要创建FormData并手动添加所有字段：

const onSubmit = async (values, { setSubmitting, setErrors }) => {
  const formData = new FormData();
  
  // 遍历所有表单字段，添加到FormData
  Object.entries(values).forEach(([key, value]) => {
    if (value instanceof File) {
      formData.append(key, value);
    } else {
      formData.append(key, value);
    }
  });

  try {
    const response = await fetch('/api/your-submit-endpoint', {
      method: 'POST',
      headers: {
        // 不要手动设置Content-Type，浏览器会自动添加正确的multipart边界
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      },
      body: formData,
    });

    const data = await response.json();
    // 处理提交成功逻辑
  } catch (error) {
    setErrors({ submit: '上传失败，请重试' });
  } finally {
    setSubmitting(false);
  }
};

后端Laravel处理 #

1. 接收并验证文件 #

在你的控制器方法中，用$request->file('cv')获取上传的文件（不要用$request->input('cv')，因为文件不在普通输入字段里），同时添加验证规则：

public function store(Request $request)
{
    $validated = $request->validate([
        // 其他表单字段验证
        'cv' => 'required|file|mimes:pdf,doc,docx|max:2048', // 限制文件类型和大小（2MB）
    ]);

    // 获取上传的文件实例
    $cvFile = $request->file('cv');
}

2. 存储文件到服务器并记录到数据库 #

Laravel提供了便捷的文件存储方法，推荐把文件存到public磁盘（需要先创建软链接）：

// 存储文件到 storage/app/public/cvs 目录，返回相对路径
$filePath = $cvFile->store('cvs', 'public');

// 将文件路径保存到数据库（假设你有对应的模型）
$application = new Application();
$application->cv_path = $filePath;
// 赋值其他表单字段
$application->save();

// 可选：返回访问文件的URL
$fileUrl = asset('storage/' . $filePath);

如果还没创建存储软链接，执行以下Artisan命令：

php artisan storage:link

常见排查点 #

• 确认前端提交的是FormData而不是JSON
• 后端不要手动设置Content-Type请求头，让浏览器自动处理
• 检查Laravel的文件上传限制（php.ini里的upload_max_filesize和post_max_size）

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