Javascript 如何将JS audio Blob保存为文件，以便将其发送到Flask API

我正在为我的朋友开发一个应用程序，我需要录制音频并将其存储在服务器上。我已经成功地用文本和图像完成了它，但我不能让它用于音频

我可能在创建文件时遗漏了一些内容（文件已创建但不可播放）从JS Blob到实际文件的数据转换肯定有问题

我设法得到了音频块，甚至在JS中播放。但是当我从blob创建一个文件时，它无法播放（我尝试在本地保存它，结果是一样的——得到了文件，但无法播放）。我还尝试用不同的格式保存它，但没有成功（wav、mp3）。因此，问题在于从blob到实际文件的转换。对于文本和图像，这很简单，文件是从blob创建的，只需使用文件名保存即可。但我想音频并不是那么简单

我的理解是，我有一些二进制数据（JSBlob），可以保存为文件。但是对于音频，必须有一些特殊的转换或编码，这样输出文件才能工作并播放

这是前端代码（我将其与一些变量一起使用，因为它是Vue组件的一部分）

这是我在服务器上的端点

@app.route('/api/v1/file/upload/<test_id>', methods=['POST'])
def upload_file(test_id):
    uploaded_file = request.files['file']
    filename = secure_filename(uploaded_file.filename)
    if filename != '':
        uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], test_id, filename))
    return jsonify({'message': 'file saved'})

@app.route('/api/v1/file/upload/<test_id>', methods=['POST'])
def upload_file(test_id):
    uploaded_file = request.files['file']
    filename = secure_filename(uploaded_file.filename)
    if filename != '':
        uploaded_file.save(os.path.join(app.config['UPLOAD_PATH'], test_id, filename))
    return jsonify({'message': 'file saved'})

navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            this.mediaRecorder = new MediaRecorder(stream);
            // audio.srcObject = stream
            
            this.mediaRecorder.start();

            this.mediaRecorder.addEventListener("dataavailable", event => {
                this.audioChunks.push(event.data)
            })
            this.mediaRecorder.addEventListener("stop", () => {
                this.audioBlob = new Blob(this.audioChunks, { 'type' : 'audio/mpeg-3' })
                
                //debugging - playing back the sound in the browser works fine
                const audioUrl = URL.createObjectURL(this.audioBlob);
                const audio = new Audio(audioUrl);
                audio.play();
                
                //adding the blob to the request
                let filename = this.$store.state.counter + "-" + this.$store.state.step
                const formData = new FormData();
                formData.append('file', this.audioBlob, `${filename}.mp3`);
                const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
                //sending it to my Flask API (xxx is the name of the folder it gets saved to on the server)
                this.$axios.post('http://localhost:5000/api/v1/file/upload/xxx', formData, config)
            })
        })