如何 POST 将音频 blob 发送到 python 服务器

Question

我正在制作一个 chrome 扩展，它获取音频，并将其发送到 python 服务器（使用 HttpServer），服务器保存音频。

问题是服务器没有正确保存音频，无法播放音频

JS:

let gapBlob = new Blob(gapRecord.recording, { type: "video/webm" });
let currGapAudio = document.getElementById("recording" + gapId)
currGapAudio.src = URL.createObjectURL(gapBlob);

var myHeaders = new Headers();
myHeaders.append("Content-Type", "multipart/form-data");


var formdata = new FormData();  
formdata.append("AudioFile",gapBlob, "my_audio.wav");

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
};

fetch("http://localhost:8080/", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

在前两行中，我使用 <audio /> 元素向客户端显示音频，效果很好。

python 服务器：

def do_POST(self):
    self.send_header('Access-Control-Allow-Origin', '*')

    file_length = int(self.headers['Content-Length'])
    newname = 'server/uploaded' + str(random.randint(100,999)) + '.wav'
    
    with open(newname, 'wb') as output_file:
        content = self.rfile.read(file_length)
        
        content = content.split(b'Content-Type: video/webm')[1]
        content = content[4:]
        content = content.split(b'------')[0]
        
        output_file.write(content)

劈叉是因为身材是这样的：

b'------WebKitFormBoundary3joaVYqdXgqiCh0X\r\nContent-Disposition: form-data; name="AudioFile"; filename="my_corrupted.wav"\r\nContent-Type: video/webm\r\n\r\n\x1aE\xdf\xa3\....2\xef\x06}\xa8\xc2\xd7\x9b\xee\xd9\xed2\x16\x0f\xdd\x07U\xef\x9f\xdf\xcb\x16Hk\xfd\x81n2=\xc3\r\n------WebKitFormBoundary3joaVYqdXgqiCh0X--'

我试图通过拆分删除附加到正文的额外文本，但没有帮助。

有人知道吗？

谢谢

Answer 1

您可以尝试使用比 HttpServer 更好的框架。这是在 Flask 中实现的相同内容，请注意原始响应主体如何没有大惊小怪。

from flask import Flask, request
import uuid

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'GET':
        return '''
<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" accept=".wav">
  <input type="submit">
</form>
'''
    print(request.files)
    file = request.files['file']
    if not file.filename.endswith('.wav'):
        return 'File extension must be .wav', 415  # Unsupported Media Type
    path = 'server/uploaded' + str(uuid.uuid4()) + '.wav'
    file.save(path)
    return 'saved to '+path

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

如何 POST 将音频 blob 发送到 python 服务器

How to POST an audio blob to a python server

javascript

python

audio

fetch

fetch-api