html5提交数据到服务器,javascript – 将HTML5音频数据POST到服务器

我目前正在实施一个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.

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())的最后一行从来没有被调用.