JavaScript录制音频上传Python Flask服务器失败问题求助

我来帮你排查下音频数据传输失败的问题，先梳理下核心问题点，再给出修复后的代码：

问题根源分析 #

1. 多余的DataURL转换：你把录制好的Blob转成了DataURL格式再放入FormData，这不仅增大了数据体积（Base64编码会让数据膨胀约30%），还让后端处理变得复杂——FormData本身支持直接上传Blob对象，完全不需要额外编码。
2. Flask后端数据获取方式错误：当使用multipart/form-data格式上传文件时，Flask需要通过request.files来获取上传的文件对象，而不是request.data（后者只能拿到原始请求体，无法解析FormData结构）。
3. 路由定义冲突：你写了两个@app.route('/')的路由，这会导致Flask无法正确匹配请求，应该合并成一个同时支持GET和POST的路由。

修正后的完整代码 #

JavaScript 部分 #

function submit(blob) {
  var fd = new FormData();
  // 直接将Blob对象添加到FormData，省去Base64编码步骤
  fd.append('file', blob, 'audio.ogg');
  
  $.ajax({
    type: 'POST',
    url: '/',
    data: fd,
    cache: false,
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data'
  }).done(function(data) {
    console.log('上传成功！服务器响应:', data);
  }).fail(function(error) {
    console.error('上传失败，错误信息:', error);
  });
}

Python Flask 服务器部分 #

from flask import Flask, render_template, request

app = Flask(__name__)

# 合并GET/POST路由，避免路由冲突
@app.route('/', methods=['GET', 'POST'])
def handle_request():
    if request.method == 'GET':
        return render_template("index.html")
    elif request.method == 'POST':
        # 从request.files中获取上传的音频文件
        if 'file' in request.files:
            audio_file = request.files['file']
            if audio_file.filename != '':
                with open('./audio.ogg', 'wb') as f:
                    # 直接读取文件流并写入本地
                    f.write(audio_file.read())
                print("音频文件已成功保存")
                return render_template("index.html", message="上传成功")
        print("未获取到有效音频文件")
        return render_template("index.html", message="上传失败")

if __name__ == '__main__':
    app.run(debug=True)

额外调试建议 #

• 可以在浏览器开发者工具的「网络」标签里查看POST请求的FormData内容，确认文件是否正确携带。
• 后端添加了简单的上传状态反馈，你可以在前端模板里通过{{ message }}变量展示给用户。

内容的提问来源于stack exchange，提问作者Nick Papastergiou