python - 如何在 Flask 中使用后端在 React 中上传 CSV 文件

Question

所以我制作了这个应用程序，它从前端获取一个 CSV 文件，将其发送到用烧瓶编写的后端。后端使用 CSV 文件中的数据并生成一个新表，然后以列表的形式发送到 jinja 模板。然后该列表以 Bootstrap 表的形式显示。我想使用具有相同功能的 React 来制作前端。但由于我是 React 的新手，我看不到任何前进的方向。以下是我的 Flask 代码。

from flask import Flask, render_template, request
import pandas as pd
import numpy as np


app = Flask(__name__)


@app.route("/", methods=["GET", "POST"])
def index():
    return render_template("index.jsx")


@app.route("/data", methods=["GET", "POST"])
def data():
    try:
        if request.method == "POST":
            file = request.form["upload-file"]
            if file == False:
                return
            data = pd.read_excel(file)
            arr = np.array(data)
            N = arr[2][0]
            N = int(N[2:])
            col = []
            stu = []
            for i in range(N):
                col.append(arr[0][i])
            for i in range(N):
                stu.append(arr[1][i])
            college = []
            student = []
            # college array
            for i in range(4, 4 + N):
                tmp = []
                for j in range(0, N):
                    x = stu.index(arr[i][j + 1])
                    tmp.append(x + N)
                college.append(tmp)
            # student array
            for i in range(5 + N, 5 + (2 * N)):
                tmp = []
                for j in range(0, N):
                    x = col.index(arr[i][j + 1])
                    tmp.append(x)
                student.append(tmp)

            ans = []
            prefer = []
            for i in range(0, len(college)):
                prefer.append(college[i])
            for i in range(0, len(student)):
                prefer.append(student[i])

            def sPrefersC1OverC(prefer, s, c, c1):
                for i in range(N):
                    if prefer[s][i] == c1:
                        return True
                    if prefer[s][i] == c:
                        return False

            def stablMatch(prefer):
                sPartner = [-1 for i in range(N)]
                cFree = [False for i in range(N)]
                freeCount = N
                while freeCount > 0:
                    c = 0
                    while c < N:
                        if cFree[c] == False:
                            break
                        c += 1
                    i = 0
                    while i < N and cFree[c] == False:
                        s = prefer[c][i]
                        if sPartner[s - N] == -1:
                            sPartner[s - N] = c
                            cFree[c] = True
                            freeCount -= 1
                        else:
                            c1 = sPartner[s - N]
                            if sPrefersC1OverC(prefer, s, c, c1) == False:
                                sPartner[s - N] = c
                                cFree[c] = True
                                cFree[c1] = False
                        i += 1
                for i in range(N):
                    tmp = []
                    tmp.append(stu[((i + N) % N)])
                    tmp.append(col[sPartner[i]])
                    ans.append(tmp)

            stablMatch(prefer)

            return render_template("data.jsx", N=N, ans=ans,)
    except:
        return render_template("error.jsx")


if __name__ == "__main__":
    app.run(debug=True)

这是我尝试过但失败的 React 代码

import React, { Component } from "react";

class Form extends Component {
  onChange(e) {
    let file = e.target.files;
    let reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = (e) => {
      const url = "http://localhost:3000/data";
      const formData = { file: e.target.result };
      return postMessage(url, formData).then((response) =>
        console.warn("result!!", response)
      );
    };
  }
  render() {
    return (
      <div>
        <form action="data" method="POST">
          <div class="form-group m-2">
            <input
              type="file"
              name="upload-file"
              class="form-control-file"
              id="exampleFormControlFile1"
            />
            <button
              type="submit"
              onClick={(e) => this.onChange(e)}
              class="btn btn-outline-dark m-2"
            >
              Submit
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default Form;

前端无法将文件 POST 到后端

我试图找到在线解决方案，但它们都不能真正解决我的问题。任何帮助将不胜感激。

标签： pythonreactjsflask