我目前正在实施一个Web应用程序,我希望用户记录一些音频,然后我想要一个提交按钮来发送记录到服务器的mp3文件.
我的服务器(Flask)目前有此代码：
@app.route('/',methods=['GET','POST'])
def index():
if request.method == "GET":
return render_template('index.html',request="GET")
else:
print request.files
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
handle_file(file)
return render_template('index.html',request="POST")
这是我的Javascript代码：
navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audio.push(e.data);
if (rec.state == "inactive"){
let blob = new Blob(audio,{type:'audio/x-mpeg-3'});
recordedAudio.src = URL.createObjectURL(blob);
recordedAudio.controls = true;
submit(blob);
}
}
})
.catch(e=>console.log(e));
// The submit button appears in the stopRecording() function.
function submit(blob) {
var http = new XMLHttpRequest();
var url = "";
http.open("POST",url,true);
var formData = new FormData();
formData.append('file',blob);
http.setRequestHeader("Content-Type","multipart/form-data");
http.send(formData);
}
不幸的是,我还没有找到办法来做这个工作;我知道我应该改变我的Flask和JS代码的东西,但我不知道什么.
当submit(blob)函数被调用时,我的服务器收到一个没有文件的请求.空的ImmutableMultiDict是空的request.files.
<Request 'http://localhost:5000/' [POST]> ImmutableMultiDict([]) 127.0.0.1 - - [11/May/2017 01:02:54] "POST / HTTP/1.1" 302
状态更新：
我也试过阅读request.form和request.data.没有什么似乎到达服务器.我的XMLHttpRequest方式可能会有问题.这是我要发送的对象：
状态更新#2
我实际上设法使用以下代码将数据发送到服务器：
function submit(blob) {
var fd = new FormData();
fd.append('file',blob,'audio.mp3');
$.ajax({
type: 'POST',url: '/',data: fd,cache: false,processData: false,contentType: false,enctype: 'multipart/form-data'
}).done(function(data) {
console.log(data);
});
}
但是我现在因为两个问题而奋斗：
记录的音频在波形方面有非常不同的结果.这是为什么？
>我想要我的函数submit()重新加载页面,现在我的index()代码(render_template())的最后一行从来没有被调用.
解决方法
尝试将音频blob转换为Base64并将base64字符串发布到服务器.
function submit(blob) {
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var fd = new FormData();
base64data = reader.result;
fd.append('file',base64data,'audio.mp3');
$.ajax({
type: 'POST',enctype: 'multipart/form-data'
}).done(function(data) {
console.log(data);
});
}
}
现在,将base64字符串转换为服务器中的二进制流.
形成更多的信息,如何解码Base64在python checkout这篇文章. Python base64 data decode
