jQuery结合PHP实现音频录制上传时file_get_contents报错如何解决

问题原因 #

blob: 开头的URL是浏览器本地临时生成的资源地址，仅在当前用户的浏览器会话内有效，服务器无法访问该地址，所以PHP端调用file_get_contents读取该地址会直接报文件不存在的错误。

前端代码修正 #

你原来的上传逻辑错误地将blob地址当作音频内容上传，还多余生成了内容为URL字符串的无效Blob对象，修正后的exportWAV回调部分代码如下：

myRecorder.objects.recorder.exportWAV(function (blob) {
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    // 原有的播放、下载逻辑保留不变
    var audioObject = $('<audio controls></audio>').attr('src', url);
    var downloadObject = $('<a>&#9660;</a>')
        .attr('href', url)
        .attr('download', new Date().toUTCString() + '.wav');
    var holderObject = $('<div class="row"></div>')
        .append(audioObject)
        .append(downloadObject);
    listObject.append(holderObject);

    // 修正后的上传逻辑
    var form_data = new FormData();
    // 直接 append 实际的音频Blob对象，指定文件名
    form_data.append('audio', blob, new Date().getTime() + '.wav');
    $.ajax({
        url: "upload.php", 
        cache: false,
        contentType: false,
        processData: false,
        data: form_data, 
        type: 'post',
        success: function(data) {
            console.log('上传成功', data);
        },
        error: function(e) {
            console.log('上传失败', e);
        }
    });
    // 删掉原来多余的 link变量定义、无效Blob生成、FileReader测试代码即可
});

后端PHP代码修正 #

现在前端传的是标准文件流，需要从$_FILES中读取数据，不要从$_POST读取，代码如下：

<?php
// 判断是否有合法的文件上传
if (isset($_FILES['audio']) && $_FILES['audio']['error'] === UPLOAD_ERR_OK) {
    // 读取临时文件内容
    $audio_content = file_get_contents($_FILES['audio']['tmp_name']);
    // 自定义保存目录，需要提前创建并给PHP写入权限
    $save_dir = __DIR__ . '/audio/';
    if (!is_dir($save_dir)) {
        mkdir($save_dir, 0755, true);
    }
    $save_path = $save_dir . $_FILES['audio']['name'];
    // 保存文件
    if (file_put_contents($save_path, $audio_content)) {
        echo '上传成功，保存路径：' . $save_path;
    } else {
        echo '保存失败，请检查目录权限';
    }
} else {
    echo '上传错误，错误码：' . ($_FILES['audio']['error'] ?? '无文件上传');
}
// 调试用输出
print_r($_FILES);
print_r($_POST);
?>

额外注意事项 #

• 代码里配置的音频保存目录需要提前创建，Windows环境给目录开通Users组读写权限，Linux环境给目录设置0755权限
• 原来的HTML文件末尾多余的?>要删掉，属于语法错误

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