前端上传WAV文件至Flask后端后文件损坏问题求助

先排查前端本身的问题 #

• 别只看MIME类型，先确认前端生成的Blob能不能正常播放：把Blob转成本地文件下载测试，代码可以加这段：

  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(audioBlob);
  downloadLink.download = 'test_front.wav';
  downloadLink.click();
  

• 如果本地下载的文件也损坏，那是录制环节的问题——部分浏览器的MediaRecorder直接指定audio/wav可能不生效，实际生成的是其他格式，这时候得用Recorder.js这类专门的库生成标准WAV文件。

后端保存环节优化 #

• 试试手动读取二进制内容再写入，避免save()方法可能的潜在问题：

  import os
  @app.route('/process_audio', methods=['POST'])
  def process_audio():
      audio_file = request.files.get('audioFile')
      if audio_file:
          # 手动写入二进制数据
          with open('audio.wav', 'wb') as f:
              f.write(audio_file.read())
          # 校验前后端文件大小是否一致
          print(f"Received file size: {audio_file.content_length}, Saved file size: {os.path.getsize('audio.wav')}")
          return 'Audio file received and saved successfully'
      else:
          return 'No audio file received', 400
  

• 要是前后端文件大小不一致，说明传输过程丢包了，得查网络或请求配置。

传输过程排查 #

• 给前端XHR加错误和进度监听，确认传输有没有中断：

  function sendAudioToServer(audioBlob) {
      console.log('MIME Type:', audioBlob.type);
      console.log('Blob Size:', audioBlob.size); // 打印大小，和后端对比
      var formData = new FormData();
      formData.append('audioFile', audioBlob);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/process_audio', true);
      // 网络错误监听
      xhr.onerror = function() {
          console.error('上传时发生网络错误');
      };
      // 上传进度监听
      xhr.upload.onprogress = function(e) {
          if (e.lengthComputable) {
              console.log(`上传进度：${(e.loaded/e.total)*100}%`);
          }
      };
      xhr.onload = function () {
          if (xhr.status === 200) {
              console.log('Audio processing successful');
              console.log(xhr.responseText);
          } else {
              console.error('Audio processing failed');
          }
      };
      xhr.send(formData);
  }
  

• 打开浏览器开发者工具的Network面板，查看POST请求的FormData是否正确包含音频文件，响应状态是否为200。

验证后端文件有效性 #

• 用ffmpeg工具检查保存的文件：执行ffmpeg -i audio.wav，如果输出正常的格式信息，说明文件没问题；如果报错，就回到前端排查录制或传输环节。

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