javascript - 将请求响应中收到的 wav 文件转换为 blob

Question

我正在尝试接收 WAV 文件作为对 POST 请求的响应。我在 Flask 中使用 send_file。我尝试在响应中检索文件客户端。我最终将其转换为 blob，以便可以自动下载。

这是服务器的 API 代码:

@app.route('/drums', methods = ['GET', 'POST'])
@cross_origin()
def upload_drums():
   if request.method == 'POST':
      f = request.files['file']
      f.save(secure_filename(f.filename))

      test_run()

      return send_file('C:/Users/Titus/Separation/results/dsd/music.wav', mimetype="audio/wav")

这是发布请求的客户端脚本:

getDrum(event: any) {

  event.preventDefault();
  let file = this.state.file;
  const formData = new FormData();

  const blob = file as Blob;
  formData.append("file", blob);

  axios
    .post("http://localhost:5000/drums", formData)
    .then((res: any) => {
      console.log(res);
      const url = window.URL.createObjectURL(new Blob(res.data, { 'type' : 'audio/wav' }));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'foo.wav'); //or any other extension
      document.body.appendChild(link);
      link.click();
    })
    .catch((err: any) => console.warn(err));
}

我在尝试将 res.data 转换为 WAV blob 时收到 “provided value cannot be converted to a sequence” 错误。文件接收成功，返回有效文件。

使用 [res.data] 而不是 res.data 创建 blob 实际上会下载文件，但无法播放文件(它已损坏)。我怀疑来自响应的数据必须是二进制的。

Answer 1

当您发出请求时，您必须指定要返回的格式，将此选项添加到 axios 调用:

responseType: 'blob'