将Audio Blob发送到服务器

我正在尝试使用jQuery的$ .post方法将WebAudio API和Recorder.js生成的音频blob发送到我的Laravel Controller。 这是我正在尝试的。

$('#save_oralessay_question_btn').click(function(e){ var question_content = $('#question_text_area').val(); var test_id_fr = parseInt($('#test_id_fr').val()); var question_type = parseInt($('#question_type').val()); var rubric_id_fr = $('#rubric_id_fr').val(); var reader = new FileReader(); reader.onload = function(event){ var form_data = new FormData(); form_data.append('audio_data', event.target.result); var result = $.post('../questions', { question_content:question_content, question_type:question_type, test_id_fr:test_id_fr, rubric_id_fr:rubric_id_fr, audio_data:form_data, processData: false, contentType: false },function(data){ var html = "
"; swal({ title: "Success!", text: data, type: "success", timer:2000 },function(){ //location.reload(); }); }) .done(function(data){ }).fail(function(xhr, status, error){ sweetAlert("Error!", error, "error"); }); }; reader.readAsDataURL(audio_files[0]); //this contains the blob recorded }); 

这给了

未捕获的TypeError：非法调用

编辑

这就是audio_files拥有的。

 recorder && recorder.exportWAV(function(blob) { audio_files.push(blob); var url = URL.createObjectURL(blob); var li = document.createElement('li'); var au = document.createElement('audio'); var hf = document.createElement('a'); //console.log(typeof(url)); au.controls = true; au.src = url; au.autoplay=true; hf.href = url; hf.download = new Date().toISOString() + '.wav'; hf.download = url +'.wav'; li.appendChild(au); li.appendChild(hf); recordingslist.appendChild(li); }); 

编辑2

我尝试了另一种使用XmlHttpRequest发送blob的方法。

 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",audio_files[0]); fd.append('question_content', question_content); fd.append('question_type', question_type); xhr.open("POST","../questions",true); xhr.send(fd); 

控制器当我可以获取$request["audio_data"]等数据时，在控制器中。 但是这给出了一个文件的路径，如C:\wamp\tmp\phpxxx请分享如何使用这些数据。 我已经看到了这条路径但是在相应的目录中没有像phpxxx的文件。

Answer 1

您发送data URL而不是Blob ; 如果预期结果是POST Blob或File对象，则不需要FileReader 。 您可以发送File对象本身，因为Fileinheritance自Blob

 $('#save_oralessay_question_btn').click(function(e) { var question_content = $('#question_text_area').val(); var test_id_fr = parseInt($('#test_id_fr').val()); var question_type = parseInt($('#question_type').val()); var rubric_id_fr = $('#rubric_id_fr').val(); var result = $.post('../questions', { question_content: question_content, question_type: question_type, test_id_fr: test_id_fr, rubric_id_fr: rubric_id_fr, audio_data: audio_files[0], processData: false, contentType: false }, function(data) { var html = "
"; swal({ title: "Success!", text: data, type: "success", timer: 2000 }, function() { //location.reload(); }); }) .done(function(data) { }).fail(function(xhr, status, error) { sweetAlert("Error!", error, "error"); }); });