如何将JavaScript创建的自定义文本Blob文件上传至PHP服务器？

用户尝试通过以下JavaScript代码创建文本Blob并上传到PHP服务器，但PHP端执行var_dump($_FILES)时输出array (0)，上传的文件并未出现在$_FILES数组里。

原JavaScript代码 #

let myFile = new Blob(["A file"], { type: "text/plain"});

fetch("server_location.php", {
  method: "POST",
  body: myFile,
  headers: {
    "Content-Type": "text/plain"
  })
  .then((res) => { return res.text(); }
  .then((text) => { console.log(text) };

原PHP代码 #

<?php
var_dump($_FILES)

问题原因 #

直接上传Blob并手动设置Content-Type: text/plain时，PHP会将其视为普通的POST文本数据，而非文件上传请求，因此不会将数据存入$_FILES数组。PHP仅会识别符合multipart/form-data格式的文件上传请求。

解决方案 #

1. 修改JavaScript代码 #

使用FormData对象包装Blob，模拟传统表单的文件上传格式，同时不要手动设置Content-Type（浏览器会自动生成正确的请求头）：

let myFile = new Blob(["A file"], { type: "text/plain"});
const formData = new FormData();
// 参数说明：表单字段名、Blob对象、文件名（可选，用于PHP识别文件名）
formData.append('uploaded_file', myFile, 'my-text-file.txt');

fetch("server_location.php", {
  method: "POST",
  body: formData
})
.then((res) => res.text())
.then((text) => console.log(text))
.catch(err => console.error('上传出错:', err));

2. 修改PHP代码 #

现在可以通过$_FILES['uploaded_file']获取上传的文件信息，示例代码如下：

<?php
// 打印文件上传信息
var_dump($_FILES['uploaded_file']);

// 可选：保存上传的文件
if (isset($_FILES['uploaded_file']) && $_FILES['uploaded_file']['error'] === UPLOAD_ERR_OK) {
    // 确保uploads目录存在且有写入权限
    $saveDir = './uploads/';
    if (!is_dir($saveDir)) {
        mkdir($saveDir, 0755, true);
    }
    $targetPath = $saveDir . basename($_FILES['uploaded_file']['name']);
    if (move_uploaded_file($_FILES['uploaded_file']['tmp_name'], $targetPath)) {
        echo "文件已保存至：{$targetPath}";
    } else {
        echo "文件保存失败";
    }
} else {
    echo "无有效文件上传或上传出错";
}
?>

关键注意事项 #

• FormData是PHP识别文件上传的标准方式，它会自动构建符合要求的请求格式
• 不要手动设置Content-Type，否则会破坏浏览器自动生成的multipart/form-data边界标识，导致PHP无法解析
• FormData.append的第三个参数是文件名，会被PHP填充到$_FILES['uploaded_file']['name']中，可根据需求修改

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