Vue.js中用$http.post上传文件失败，PHP无法接收怎么解决？

你的问题核心在于文件上传的请求格式错误——你把File对象塞进了JSON结构里，还手动设置了不完整的multipart/form-data请求头，导致PHP无法正确解析文件数据。下面是具体的修复步骤：

一、修改前端Vue的上传逻辑 #

我们需要用FormData对象来封装文件和其他参数，这是浏览器处理文件上传的标准方式，它会自动处理正确的请求编码和边界符：

uploadData: function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return; // 空文件直接返回

  // 构建FormData实例，添加文件和其他请求参数
  const formData = new FormData();
  formData.append('file', selectedFile);
  formData.append('action', 'upload'); // 对应你原来的request.action

  // 发送请求，不需要手动设置Content-Type
  this.$http.post('data/getData.php', formData)
    .then(response => {
      console.log("RESPONSE: ", response.body);
    })
    .catch(error => {
      alert("上传出错：" + error.message);
    });
  return false;
}

关键说明： #

• 不要手动设置Content-Type: multipart/form-data，浏览器会自动添加包含boundary（分隔符）的完整请求头，这是PHP能解析文件的关键。
• FormData会自动处理文件的二进制数据，不需要额外转换。

二、修改PHP后端代码 #

现在请求是标准的文件上传格式，不能再通过php://input读取JSON了，要改用PHP的超全局变量$_FILES获取文件，$_POST获取其他参数：

// 获取上传的文件信息
$uploadedFile = $_FILES['file'];
// 获取其他表单参数
$action = $_POST['action'] ?? '';

// 可以先输出调试信息，确认是否接收到
echo json_encode([
  'action' => $action,
  'file' => [
    'name' => $uploadedFile['name'],
    'type' => $uploadedFile['type'],
    'tmp_name' => $uploadedFile['tmp_name'],
    'error' => $uploadedFile['error'],
    'size' => $uploadedFile['size']
  ]
]);

后续可选操作（保存文件到服务器）： #

如果需要把文件持久化到服务器，可以用move_uploaded_file函数：

if ($uploadedFile['error'] === UPLOAD_ERR_OK) {
  $targetDir = './uploads/';
  $targetPath = $targetDir . basename($uploadedFile['name']);
  // 确保上传目录存在
  if (!is_dir($targetDir)) mkdir($targetDir, 0755, true);
  if (move_uploaded_file($uploadedFile['tmp_name'], $targetPath)) {
    echo json_encode(['status' => 'success', 'file_path' => $targetPath]);
  } else {
    echo json_encode(['status' => 'error', 'msg' => '文件保存失败']);
  }
} else {
  echo json_encode(['status' => 'error', 'msg' => '上传错误：' . $uploadedFile['error']]);
}

为什么原来的方式不行？ #

• JSON格式无法承载二进制的文件数据，你看到的[object File]只是对象的字符串表示，并没有真正传递文件内容。
• 手动设置multipart/form-data缺少必要的boundary参数，PHP无法正确拆分请求体中的各个字段。

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