Vue3上传文件至Laravel后端遇验证错误求助

数据老陈

2026-7-17

问题分析与解决方案

核心问题

你的问题出在前端FormData的使用方式错误和请求头Content-Type设置错误，导致后端无法正确接收文件，进而触发验证失败。

具体修正步骤

修正FormData的文件添加方式
不能直接通过属性赋值的方式添加文件到FormData，必须使用append方法：

// 错误写法
// formData.file = event.target.files[0];

// 正确写法
const formData = new FormData();
formData.append('file', event.target.files[0]);

移除错误的Content-Type设置
你当前设置的"Content-type": "application/json; multipart/form-data"是错误的，混合了两种不兼容的格式。上传文件时，不要手动设置Content-Type，浏览器会自动生成包含正确boundary参数的multipart/form-data请求头，确保后端能解析文件：
- 若使用axios，只需传递FormData即可，axios会自动处理请求头；
- 若使用fetch，同样无需手动设置Content-Type。
恢复后端原验证规则
你最初的验证规则是正确的，无需修改：
```
'file' => 'nullable|mimes:png,jpg,jpeg,pdf,docx|max:2048',
```

完整前端示例（axios版）

const handleUpload = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const formData = new FormData();
  formData.append('file', file);

  axios.post('/api/upload', formData)
    .then(res => console.log('上传成功', res))
    .catch(err => console.error('上传失败', err));
};