WordPress 前端录音文件上传为 0 字节：原因和彻底修复指南

2024-03-19 18:52:31

WordPress 前端录音文件上传为 0 字节：彻底故障排除指南

引言

在 WordPress 网站上上传前端录音时遇到 0 字节文件的麻烦？这个令人沮丧的问题可能是由 JavaScript 录音、blob 处理和 PHP 文件上传中的错误引起的。在本指南中，我们将深入探讨此问题的潜在原因并提供全面的解决方案。

JavaScript 录音和处理

问题： JavaScript 录音功能可能无法正确收集音频数据。

解决方案：

验证 getUserMedia 是否成功获取音频流。
确保 MediaRecorder 已正确配置并启动。
检查 audioChunks 数组中是否包含录音数据。

通信问题

问题： JavaScript 和 PHP 脚本之间的通信可能存在中断。

解决方案：

确认 AJAX 请求已正确发送到 PHP 脚本。
确保 PHP 脚本已配置为接收 multipart/form-data 请求。
检查服务器端是否正确处理了 audioFile 输入。

PHP 文件上传

问题： PHP 脚本可能无法正确处理上传的文件。

解决方案：

确保 move_uploaded_file() 函数的路径参数正确。
验证文件是否成功保存到上传目录。
考虑使用 wp_handle_upload() 函数进行更可靠的文件处理。

其他建议

使用浏览器的控制台检查是否存在错误或警告。
尝试在不同浏览器中测试该功能。
确保 WordPress 版本和插件是最新的。
禁用其他可能干扰文件上传的插件。

代码示例

改进后的 JavaScript 代码：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {

    const mimeType = MediaRecorder.isTypeSupported('audio/mp3') ? 'audio/mp3' : 'audio/webm';
    mediaRecorder = new MediaRecorder(stream, { mimeType });

    mediaRecorder.ondataavailable = event => {
      if (event.data.size > 0) {
        audioChunks.push(event.data);
      }
    };

    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: mimeType });
      const audioUrl = URL.createObjectURL(audioBlob);
      document.querySelector("#audioPreview").src = audioUrl;
    };
  });

改进后的 PHP 代码：

add_action('admin_post_nopriv_upload_audio', 'handle_audio_upload'); 
add_action('admin_post_upload_audio', 'handle_audio_upload'); 

function handle_audio_upload() {
    if (isset($_FILES['audioFile'])) {

        $upload_dir = wp_upload_dir();
        $upload_path = $upload_dir['path'] . '/' . basename($_FILES['audioFile']['name']);

        if (move_uploaded_file($_FILES['audioFile']['tmp_name'], $upload_path)) {

            wp_send_json_success();
        } else {
            wp_send_json_error();
        }
    }
    wp_die(); 
}