Python 如何将CSV文件上载到React中，并在Flask中使用后端

因此，我制作了这个应用程序，它从前端获取一个CSV文件，将其发送到flask中编写的后端。后端使用CSV文件中的数据并生成一个新表，然后以列表的形式发送给jinja模板。然后，该列表以引导表的形式显示。 我想使用React制作前端，它具有相同的功能。但因为我是React的新手，所以我看不到任何潜在客户。 下面是我的代码

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)

从烧瓶导入烧瓶，呈现模板，请求
作为pd进口熊猫
将numpy作为np导入
app=烧瓶（名称）
@app.route（“/”，methods=[“GET”，“POST”]）
def index（）：
返回渲染模板（“index.jsx”）
@app.route（“/data”，方法=[“GET”，“POST”]）
def data（）：
尝试：
如果request.method==“POST”：
文件=请求。表格[“上传文件”]
如果file==False：
返回
数据=pd.read\u excel（文件）
arr=np.数组（数据）
N=arr[2][0]
N=int（N[2:]
col=[]
stu=[]
对于范围（N）中的i：
列追加（arr[0][i]）
对于范围（N）中的i：
附加说明（arr[1][i]）
学院=[]
学生=[]
#大学阵列
对于范围（4,4+N）内的i：
tmp=[]
对于范围（0，N）内的j：
x=标准指数（arr[i][j+1]）
tmp.append（x+N）
学院附加（tmp）
#学生数组
对于范围（5+N，5+2*N）内的i：
tmp=[]
对于范围（0，N）内的j：
x=列索引（arr[i][j+1]）
tmp.append（x）
student.append（tmp）
ans=[]
首选=[]
对于范围（0，len（学院））内的i：
preference.append（学院[i]）
对于范围（0，len（学生））中的i：
preference.append（学生[i]）
def喷洒器C1OVER（首选、s、c、c1）：
对于范围（N）中的i：
如果更喜欢[s][i]==c1：
返回真值
如果更喜欢[s][i]==c：
返回错误
def stablMatch（首选）：
sPartner=[-1表示范围（N）内的i]
cFree=[范围（N）中的i为假]
自由计数=N
当freeCount>0时：
c=0
而c

这是我尝试过但失败的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;

import React，{Component}来自“React”；
类形式扩展组件{
onChange（e）{
让file=e.target.files；
let reader=new FileReader（）；
reader.readAsDataURL（文件[0]）；
reader.onload=（e）=>{
常量url=”http://localhost:3000/data";
const formData={file:e.target.result}；
返回postMessage（url，formData）。然后（（响应）=>
console.warn（“结果！！”，响应）
);
};
}
render（）{
返回(
这个.onChange（e）}
class=“btn btn轮廓暗m-2”
>
提交
);
}
}
导出默认表单；

前端无法将文件发布到后端

我试图在网上找到解决方案，但没有一个能真正解决我的问题。

---

任何帮助都将不胜感激。

“它失败了”，你怎么知道？stacktrace会非常有用。“代理错误：无法将请求/数据从localhost:3000代理到（EconRefused）。”这是我每次发出post请求时都会遇到的错误。如果这不是你想要的，我很抱歉。可能会有帮助：。。。。我觉得是浏览器拒绝了跨源请求。您可以通过扩展启用CORS请求来快速验证。如果提供的链接解决了您的问题，请随时回答您的问题。它起作用了。非常感谢你！“失败了”，你怎么知道？stacktrace会非常有用。“代理错误：无法将请求/数据从localhost:3000代理到（EconRefused）。”这是我每次发出post请求时都会遇到的错误。如果这不是你想要的，我很抱歉。可能会有帮助：。。。。我觉得是浏览器拒绝了跨源请求。您可以通过扩展启用CORS请求来快速验证。如果提供的链接解决了您的问题，请随时回答您的问题。它起作用了。非常感谢你！