【发布时间】：2016-12-11 12:27:28
【问题描述】：
我正在尝试使用 jQuery 的 $.post 方法将 WebAudio API 和 Recorder.js 生成的音频 blob 发送到我的 Laravel 控制器。这是我正在尝试的。
$('#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 = "<div class='row col-md-4'><div class='col-md-offset-6'><i class='fa fa-check fa-5x' aria-hidden='true'></i></div></div>";
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
});
这给了
未捕获的类型错误：非法调用
编辑
这就是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 这样的文件。
【问题讨论】：
-
audio_files中保存的数据是什么？ -
感谢罗里抽出宝贵时间。这是我要发送的blob
-
好的，但是它们是如何生成的？你确定它们是二进制数据吗，否则错误会指示
-
是的，它们是生成的。在当前文档上录制和播放之前的一切工作正常。
标签： jquery laravel-5.2 blob web-audio-api form-data