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));
}

尝试将"provided value cannot be converted to a sequence"转换为WAV Blob时出现res.data错误。文件已成功接收，并将有效文件发回。

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

Answer 1

发出请求时，必须具体说明要返回的格式，将此选项添加到axios调用中：

responseType: 'blob'

将请求响应中收到的WAV文件转换为Blob

1 个答案: