客户端麦克风音频发送至Flask服务器后读取异常问题排查

问题 #

尝试从用户麦克风采集音频并发送到Flask服务器时持续报错。

前端JavaScript代码 #

navigator.mediaDevices.getUserMedia({audio:true})
      .then(stream => {handlerFunction(stream)})

function handlerFunction(stream) {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
      audioChunks.push(e.data);
      if (rec.state == "inactive"){
        let blob = new Blob(audioChunks,{type:'audio/mpeg-3'});
        recordedAudio.src = URL.createObjectURL(blob);
        recordedAudio.controls=true;
        recordedAudio.autoplay=true;
        var data = new FormData()
        data.append('file', blob, 'file')
        sendData(data)
      }
    }
}
function sendData(data) {
    fetch('http://127.0.0.1:5000/test',{
        method: 'POST',
        body: data
    })
}

后端Flask代码 #

if request.method == "POST":
    files = request.files
    file = files.get('file')
    print(file.content)
return render_template('test.html')

报错信息 #

File "C:\Users\Rohan\anaconda3\lib\site-packages\flask\app.py", line 2447, in wsgi_app
    response = self.full_dispatch_request()
File "C:\Users\Rohan\anaconda3\lib\site-packages\flask\app.py", line 1952, in full_dispatch_request
    rv = self.handle_user_exception(e)
File "C:\Users\Rohan\anaconda3\lib\site-packages\flask\app.py", line 1821, in handle_user_exception
    reraise(exc_type, exc_value, tb)
0, in full_dispatch_request
    rv = self.dispatch_request()
File "C:\Users\Rohan\anaconda3\lib\site-packages\flask\app.py", line 1936, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
File "main.py", line 24, in test2
    print(file.content)
File "C:\Users\Rohan\anaconda3\lib\site-packages\werkzeug\datastructures.py", line 3095, in __getattr__
    return getattr(self.stream._file, name)
AttributeError: '_io.BytesIO' object has no attribute 'content'

解决方法 #

报错核心原因是Flask从request.files获取的文件对象是Werkzeug的FileStorage实例，底层对应BytesIO流，不存在content属性。

修改后端代码，将print(file.content)替换为以下任一操作：

1. 读取文件内容：

print(file.read())

2. 将文件保存到本地：

file.save('uploaded_audio.mp3')

额外补充前端缺失逻辑：当前代码没有触发录音启停的操作，需添加按钮事件来控制录音开始和结束，否则rec.state不会变为inactive，无法触发上传逻辑。示例代码如下：

// 假设页面存在id为startBtn和stopBtn的按钮
document.getElementById('startBtn').addEventListener('click', () => {
    audioChunks = []; // 重置音频块数组
    rec.start();
});

document.getElementById('stopBtn').addEventListener('click', () => {
    rec.stop();
});

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