JavaScript FormData与PHP交互时Blob无法正常传输的问题排查

问题现象 #

原本直接将Blob作为POST请求体发送时，PHP用file_get_contents('php://input')能正常接收。但改用FormData同时封装Blob和文本数据后，PHP端$_FILES['blob']为空，$_POST['blob']仅收到字符串"[object Blob]"，转File对象也无效。

问题原因 #

FormData默认不会自动将Blob识别为文件上传类型，必须显式指定文件名（第三个参数），否则会把Blob对象转为字符串形式传递，导致PHP无法解析为文件。

解决方法 #

在FormData添加Blob时，补充文件名参数，或者将Blob转为File对象时指定文件名和MIME类型，PHP端通过$_FILES读取临时文件即可。

修改后的前端代码 #

方案1：直接给Blob添加文件名参数

function createDownloadLink(blob, encoding) {
    const formData = new FormData();
    // 第三个参数指定自定义文件名，比如'upload.blob'
    formData.append('blob', blob, 'data.blob');
    formData.append('text', text);

    fetch('https://localhost:443/process.php', { method: "POST", body: formData })
        .then(response => response.json())
        .then(aidata => {
            textInputG.value = aidata.text;
        });
}

方案2：将Blob转为File对象（更明确）

function createDownloadLink(blob, encoding) {
    // 将Blob转为File，指定文件名和原Blob的MIME类型
    const file = new File([blob], 'data.blob', { type: blob.type });
    const formData = new FormData();
    formData.append('blob', file);
    formData.append('text', text);

    fetch('https://localhost:443/process.php', { method: "POST", body: formData })
        .then(response => response.json())
        .then(aidata => {
            textInputG.value = aidata.text;
        });
}

修改后的PHP接收代码 #

<?php
// 检查文件上传状态
if (isset($_FILES['blob']) && $_FILES['blob']['error'] === UPLOAD_ERR_OK) {
    // 读取临时文件内容，和原php://input逻辑一致
    $blob_data = file_get_contents($_FILES['blob']['tmp_name']);
    $text_data = $_POST['text'];
    
    // 此处编写业务处理逻辑
    $text = '处理完成的结果';
    echo json_encode(['text' => $text]);
} else {
    echo json_encode(['text' => '文件上传失败']);
}
?>

注意事项 #

• 确保PHP配置中upload_max_filesize和post_max_size值足够大，避免大Blob上传失败。
• 若Blob为特定类型（如音频、图片），可调整文件名后缀和MIME类型，适配后续业务处理。

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