Vue使用axios发送FormData时File对象未传递到PHP后端如何解决

问题原因及解决方案 #

1. 前端axios配置错误

这是最常见的触发原因：

• 不要手动为FormData类型的请求设置Content-Type: multipart/form-data请求头，axios会自动识别传入的FormData对象，自动生成带唯一boundary的请求头，手动配置时如果缺失boundary参数，PHP无法正常解析表单内容，就会出现普通参数正常、文件丢失的情况。
• 检查是否配置了全局请求拦截器统一序列化请求体，FormData不需要做JSON序列化，如果拦截器强制将所有请求体转为JSON，会直接销毁FormData内的文件数据。

正确的axios配置参考：

// 不要手动设置Content-Type
const config = {}
axios.post('/api/createPostV2', formData, config)
.then(success => {
    console.log(success.data);
})
.catch(function(err) {
    console.log(err.response);
});

// 如果配置了全局拦截器，需要增加FormData判断逻辑
axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    // FormData直接透传，不做序列化也不修改Content-Type
    return config
  }
  // 其他类型请求的序列化逻辑
  config.data = JSON.stringify(config.data)
  config.headers['Content-Type'] = 'application/json'
  return config
})

2. 后端PHP（Laravel）接收方式错误

Laravel的$request->all()方法只会返回普通POST参数，上传的文件不会被包含在all()的返回结果中，需要单独用$request->file()方法获取，所以你直接返回$request->all()看到的media是空对象，不代表文件没有传成功。

修改后端验证代码即可确认文件是否上传成功：

public static function createPostV2(Request $request)
{
    return [
        '普通参数' => $request->all(),
        '上传文件列表' => $request->file('media'), // 这里才是你上传的File对象
        '第一个文件是否上传成功' => $request->hasFile('media.0')
    ];
}

3. 边缘排查点

如果上述配置都正常还是获取不到文件，可以检查：

• php.ini配置的upload_max_filesize、post_max_size是否大于你上传的文件大小
• 浏览器网络面板查看请求的Payload，确认FormData中是否已经包含了对应的File对象

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