JS向PHP发送POST请求时$_FILES返回NULL，求助问题原因

问题根源 #

• 错误的请求头设置：你手动指定了Content-Type: application/x-www-form-urlencoded，但文件上传必须使用multipart/form-data格式，这种格式才支持文件二进制数据的传输。且当使用FormData作为fetch的请求体时，浏览器会自动正确设置该请求头，无需手动添加。
• 错误的FormData传递方式：你将FormData对象直接拼接到URL编码的字符串中（body: formData=${formData}&extension=...），这会导致FormData被强制转换为字符串[Object FormData]，文件数据根本没有被正确传递，PHP自然无法解析出$_FILES数据。

修正后的代码 #

JS文件

const formData = new FormData();
formData.append("file", droppedFile);
// 直接将extension追加到FormData对象中
formData.append("extension", droppedFile.name.split(".").pop());

// 发送POST请求
const saveFile = await fetch("../controller/save-file.php", {
    method: "POST",
    // 移除手动设置的Content-Type，让浏览器自动处理
    body: formData
}).then((response) => response.json());

PHP文件

<?php 

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With');

ini_set('file_uploads', 'On');
ini_set('upload_max_filesize', '1GB');
ini_set('post_max_size', '1GB');

$path = "../models/";

if(isset($_FILES['file'])){
    // 获取传递的extension参数
    $extension = $_POST['extension'];
    var_dump($_FILES);
    var_dump($extension);

    // 恢复原有的文件保存逻辑
    // $filename = "自定义文件名." . $extension;
    // $location = $path . 'fbx/' .$filename;  
    // if(!file_exists($location)){
    //    if(!move_uploaded_file($_FILES['file']['tmp_name'], $location))
    //    {
    //      echo json_encode("File was not saved");
    //      exit(1);
    //    }
    //    echo json_encode("file was created");
    // }
    // else{
    //    echo json_encode("file already exists");
    // }
}
else{
    echo json_encode("no file uploaded");
}

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