使用PHP上传MediaRecorder API录制的视频失败，如何排查解决？

本次故障分为前端请求配置错误、后端环境配置错误两类，具体修复步骤如下：

1. 前端代码修复 #

核心错误：sendToServer方法中手动设置了Content-Type: multipart/form-data请求头，但没有携带FormData所需的分隔符boundary，导致PHP无法解析请求体，无法识别上传的文件。
修复方案：移除自定义的请求头配置，使用axios发送FormData数据时，会自动生成带正确boundary的请求头，无需手动设置。
修复后的sendToServer代码：

function sendToServer(file) {
    let url = 'send.php'
    var formData = new FormData()
    formData.append("file", file)
    axios.post(url, formData)
        .then((response) => {
            console.log(response.data)
        })
        .catch((error) => {
            console.log(error.response)
        })
}

可选优化：生成File对象时明确指定MIME类型，避免后端识别异常：

var file = new File([superBuffer], 'test.webm', { type: 'video/webm' })

2. 后端配置与代码修复 #

2.1 上传目录权限配置 #

确保项目根目录下的uploads目录存在，且PHP运行用户有写入权限：

• Linux环境执行命令：

mkdir -p uploads
chmod 755 uploads
chown www-data:www-data uploads

• Windows环境：给uploads目录开放站点运行用户的「写入」权限。

2.2 PHP上传参数调整 #

视频文件体积通常较大，需要修改php.ini中的相关配置，避免大小或超时限制导致上传失败：

upload_max_filesize = 100M
post_max_size = 120M
max_execution_time = 300

修改完成后重启PHP运行服务（Apache、php-fpm等）生效。

2.3 PHP代码优化 #

增加错误判断逻辑，方便定位问题：

<?php
if (!isset($_FILES['file'])) {
    die("未接收到上传文件");
}
$uploadError = $_FILES['file']['error'];
if ($uploadError !== UPLOAD_ERR_OK) {
    die("上传失败，错误码：" . $uploadError . "，可参考PHP官方上传错误码定义排查");
}

$targetDir = "uploads/";
if (!is_dir($targetDir)) {
    mkdir($targetDir, 0755, true);
}
$targetPath = $targetDir . 'test.webm';

if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetPath)) {
    echo "File uploaded successfully";
} else {
    echo "File not uploaded，检查uploads目录写入权限";
}
?>

3. 补充注意事项 #

• 当前下载功能中设置的type: 'video/mp4'仅修改了文件后缀，实际录制生成的是VP9编码的WEBM格式文件，若需要MP4格式需要额外转码处理
• 确认前端请求的send.php路径与文件实际存放路径一致

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