如何用Plupload上传麦克风录制音频？addFile方法无效求解决

你之前用addFile失败，大概率是因为直接传了Blob数组，而且没给Blob补充必要的文件名、大小这些元数据，Plupload没法正确处理。按下面的步骤来就能解决：

步骤1：合并Blob数组为完整音频文件 #

录制得到的是一堆小Blob片段，先把它们合并成一个完整的音频Blob，记得指定正确的MIME类型（比如你录的是webm就用audio/webm，mp3就用audio/mpeg）：

// 把录制好的Blob数组传进来，合并成完整Blob
function mergeRecordedBlobs(blobs, mimeType) {
    return new Blob(blobs, { type: mimeType });
}

// 调用示例：假设你的录制Blob数组叫recordedBlobs
const fullAudioBlob = mergeRecordedBlobs(recordedBlobs, 'audio/webm');

步骤2：包装Blob为Plupload可识别的格式 #

Plupload的addFile能接受Blob，但需要补充name（文件名）、size（文件大小）这些属性，我们直接包装成一个对象：

// 自定义文件名，加个时间戳避免重名
const uploadFile = {
    name: `recorded_audio_${Date.now()}.webm`,
    size: fullAudioBlob.size,
    getSource: function() {
        return fullAudioBlob;
    }
};

// 添加到上传器里
uploader.addFile(uploadFile);

// 要是不想让用户手动点上传按钮，直接加这句自动上传
// uploader.start();

整合到你的现有代码里 #

找个录制完成的回调函数（比如你的录音组件结束录制时触发的方法），把上面的逻辑放进去就行：

// 假设这是录音结束的回调函数
function onRecordingFinish(recordedBlobs) {
    // 合并Blob
    const fullAudioBlob = mergeRecordedBlobs(recordedBlobs, 'audio/webm');
    // 包装成Plupload能处理的文件对象
    const uploadFile = {
        name: `recorded_audio_${Date.now()}.webm`,
        size: fullAudioBlob.size,
        getSource: function() {
            return fullAudioBlob;
        }
    };
    // 添加到上传队列
    uploader.addFile(uploadFile);
    // 可选：自动触发上传
    // uploader.start();
}

注意事项 #

• MIME类型要和你录制的音频格式对应，不然服务器可能解析不了；
• 必须给包装的对象加name和size，Plupload靠这些属性管理文件；
• 你已经开了分块上传（chunk_size: '1mb'），大音频会自动分块传，不用额外处理。

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