将 .wav 文件从 React 前端发送到 Flask 后端

Question

总的来说，我是新的 Flask 和 Blob，但我一直在尝试将 .wav 文件从我的前端发送到我的后端。一般来说，我似乎应该将文件放入 FormData() 中，然后向后端发送 post-请求。

这是我的前端代码：

import React from "react";
import { DropzoneArea } from "material-ui-dropzone";
import axios from "axios";

const DropzoneAreaExample = () => {
  const headers = {
    "content-type": "multipart/form-data",
  };

  const fileDrop = (files: File[]) => {
    const formData = new FormData();

    const file: File = files[0];
    formData.append("file", file);

    axios
      .post("http://localhost:5000/analyze", { formData }, { headers })
      .then((res) => console.log(res.data));
  };

  return (
    <div>
      <DropzoneArea onDrop={fileDrop} />
    </div>
  );
};

export default DropzoneAreaExample;

在后端，我正在尝试这样做：

import flask
from flask import request
from flask_cors import CORS

app = flask.Flask(__name__)
CORS(app)


@app.route('/analyze', methods=['GET', 'POST'])
def analyze_data():
    if request.method == 'POST':
        f = request.files['file']
        f.save()
        return "test"

任何正确方向的帮助或推动将不胜感激！

Answer 1

我终于找到了解决办法。问题出在 axios-request。我将它转换为 fetch-request，然后一切正常。这是来自前端的工作请求：

const FileUploader = () => {
  const fileDrop = (files: File[]) => {
    const formData = new FormData();

    const file: File = files[0];
    formData.append("file", file);

    fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    }).then((res) => {
      console.log(res.text);
    });
  };

Answer 2

当你将数据作为第二个参数传递给axios post时，你不会将它放在一个对象中。

axios
  .post("http://localhost:5000/analyze", formData, { headers })
  .then((res) => console.log(res.data));

将 .wav 文件从 React 前端发送到 Flask 后端

Sending .wav file from React frontend to Flask backend

rest

blob

flask

reactjs