处理 BLOB 并上传使用 recorder.js 和 HTML5 记录的 .wav 文件答案

【问题标题】：handling BLOB and uploading .wav file recorded with recorder.js and HTML5处理 BLOB 并上传使用 recorder.js 和 HTML5 记录的 .wav 文件
【发布时间】：2014-03-12 19:02:14
【问题描述】：

参考此对话的最后一个答案： Question-Answer-Session 我无法调试和修复文件并正确运行代码。我看到它被标记为有用且正确。有人可以帮助我了解解决此问题所需的文件结构吗？我无法运行此代码。

主要问题：我正在尝试将录制的音频保存到服务器。
我的 BLOB 网址是：blob:http%3A//localhost/7bc08d6c-8862-45b5-b567-040fd14ef4aa
我正在使用 recorder.js

谢谢！

【问题讨论】：

您到底遇到了哪一段代码？你能告诉我们你的尝试吗？
函数上传(blob) { var xhr=new XMLHttpRequest(); xhr.onload=function(e) { if(this.readyState === 4) { console.log("服务器返回：",e.target.responseText)); } }; var fd=new FormData(); fd.append("that_random_filename.wav",blob); xhr.open("POST","",true); xhr.send(fd); }
我尝试通过更改值但没有用
你需要一个 blob 而不是 blob url。

标签： javascript ajax blob html5-audio blobstorage

【解决方案1】：

const constructUploadData = (file: any, data: { audioQueueId: string | Blob; fileName: string | Blob }) => {
    const formData = new FormData();
    formData.append('audioQueueId', data.audioQueueId);
    formData.append('fileName', data.fileName);
    if (file) {
        formData.append('file', new Blob(file ? [file] : [], { type: file.type }));
    }
    return formData;
};
     


const uploadAudioInBackground = (file: any, data: any) => {
    return axios.post(`clip/upload`, constructUploadData(file, data), {
        headers: { 'Content-Type': 'multipart/form-data' }
    });
};

【讨论】：