音频上传功能正常但报Undefined index: audio_data错误求助

Let's walk through solving this error — I’ve dealt with similar FormData upload issues before, so here’s a step-by-step breakdown of what’s going wrong and how to fix it:

1. Fix the Frontend: Prevent Default Link Behavior #

The first and most likely culprit is your <a> tag triggering a page reload before the XHR request can finish. When you click the link, the browser tries to navigate to #, which interrupts the file upload entirely. Add event.preventDefault() to your click handler to stop this:

upload.addEventListener("click", function(event){
    event.preventDefault(); // Stop the link from reloading the page
    var xhr=new XMLHttpRequest();
    xhr.onload=function(e) {
        if(this.readyState === 4) {
            console.log("Server returned: ",e.target.responseText);
        }
    };
    var fd=new FormData();
    fd.append("audio_data", blob, filename);
    xhr.open("POST","upload.php",true);
    xhr.send(fd);
})

Double-check that blob is a valid recorded audio Blob and filename is a non-empty string (e.g., recorded_audio.wav) — if either is undefined, the FormData entry won’t be created correctly.

2. Hardened Backend Code with Error Checking #

Your current PHP code assumes the file is always present, which triggers the "Undefined index" notice when no file is received. Add validation checks to handle errors gracefully and debug issues:

<?php
// Optional: Increase upload limits if your audio files are large
ini_set('upload_max_filesize', '10M');
ini_set('post_max_size', '10M');

define ('SITE_ROOT', realpath(dirname(__FILE__)));
$uploadDir = SITE_ROOT . "/upload/";

// First, verify the file was uploaded successfully
if(isset($_FILES['audio_data']) && $_FILES['audio_data']['error'] === UPLOAD_ERR_OK) {
    $input = $_FILES['audio_data']['tmp_name'];
    $output = $uploadDir . uniqid() . date("Y-m-d") . ".wav";

    // Create the upload directory if it doesn't exist
    if(!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true); // 0755 gives safe read/write permissions
    }

    // Move the temporary file to the final location
    if(move_uploaded_file($input, $output)) {
        echo "Audio uploaded successfully!";
    } else {
        echo "Error: Failed to move uploaded file. Check directory permissions.";
    }
} else {
    // Debug output to diagnose what went wrong
    echo "Error details:\n";
    if(isset($_FILES['audio_data'])) {
        echo "Upload error code: " . $_FILES['audio_data']['error'] . "\n";
        // Common codes: UPLOAD_ERR_INI_SIZE (file too big), UPLOAD_ERR_NO_FILE (no file sent)
    } else {
        echo "No audio file received in the request.\n";
    }
    echo "Raw \$_FILES data:\n";
    print_r($_FILES);
}

require_once('bookmypte.php');
?>

3. Debug with Browser Dev Tools #

To confirm the request is sending the file correctly:

• Open your browser’s DevTools (F12) and go to the Network tab
• Click your Upload button
• Find the POST request to upload.php and check the Form Data section — you should see audio_data listed as a File
• If it’s missing, double-check that your blob variable is properly capturing the recorded audio (log blob to the console before appending to FormData to verify)

Final Checks #

• Ensure the upload directory in your plugin folder has write permissions (most servers require 0755 or 0775 permissions)
• Verify your WordPress server’s PHP settings allow file uploads (check file_uploads = On in php.ini)

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