HTML5 + AJAX 實現錄音文件（WAV）流式上傳至服務器

需求背景

開發類似 QQ 語音消息功能：用戶在瀏覽器端錄音（生成 Blob/WAV），無需 <input type="file"> 手動選擇，直接將二進制流通過 AJAX 異步上傳至後端。

核心技術點

1. MediaRecorder API：瀏覽器原生錄音，產出 Blob 對象。
2. FormData：構建符合 multipart/form-data 標準的表單數據，支持直接追加 Blob/File。
3. XMLHttpRequest / fetch：發送異步請求，監聽上傳進度。

關鍵代碼流程

// 1. 錄音結束獲取 Blob (假設已有 mediaRecorder 實例)
mediaRecorder.ondataavailable = async (e) => {
    const audioBlob = new Blob([e.data], { type: 'audio/wav' });
    
    // 2. 構建 FormData
    const formData = new FormData();
    formData.append('audioFile', audioBlob, `recording_${Date.now()}.wav`);
    formData.append('userId', currentUserId); // 附帶業務字段

    // 3. AJAX 上傳 (使用 fetch 現代寫法)
    try {
        const response = await fetch('/api/upload/voice', {
            method: 'POST',
            body: formData
            // 無需手動設置 Content-Type，瀏覽器自動設置 boundary
        });
        const result = await response.json();
        console.log('上傳成功:', result);
    } catch (err) {
        console.error('上傳失敗:', err);
    }
};

後端接收提示

服務端（Java/SpringBoot, C#/ASP.NET Core, Node.js 等）按標準文件上傳接口處理即可，無需特殊「流式」解析邏輯。注意配置最大請求體大小限制。

參考資源

HTML5 AJAX 文件上傳 ASP.NET 示例