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.

<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