使用 React 前端和 Flask 后端显示 CSV 文件

Question

我正在尝试使用flask读取csv文件，然后通过react显示它（显示部分应该强制通过react完成）。我卡在了 js 文件的 return 部分。

这是烧瓶(.py)代码:

from flask import Flask,render_template,request
import os
import pandas as pd

app=Flask(__name__)
app.secret_key="123"

app.config["UPLOAD_FOLDER1"]="static/csv"

@app.route("/upload",methods=['GET','POST'])
def upload():
    return render_template("UploadCsv.html")

@app.route("/display",methods=["GET","POST"])
def display():
    upload_file = request.files['upload_csv']
    if upload_file.filename != '':
            file_path = os.path.join(app.config["UPLOAD_FOLDER1"], upload_file.filename)
            upload_file.save(file_path)
            data=pd.read_csv(file_path,sep=",")
            return render_template("CsvContent.html",data=data.to_html(index=False))

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

下面是上面 .py 文件中使用的两个 HTML： UploadCsv.html

<html>
    <head>
        <title>Upload CSV File</title>
    </head>
    <body>
        <div class="col-md-offset-3 col-md-5" style="margin-top:70px">
            <form method="POST" action="http://127.0.0.1:5000/display" enctype="multipart/form-data">
                <h3 class="page-header text-primary">Upload CSV File</h3>
                <div class="form-group">
                    <label>Browse CSV File</label>
                    <input type="file" class="form-control" name="upload_csv">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success btn-block">Upload CSV</button>
                </div>
            </form>
        </div>
    </body>
</html>

CsvContent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSV File</title>
</head>
<body>
    <h2>Here's your uploaded CSV file :</h2>
    {{data|safe}}
</body>
</html>

这成功地通过 Flask 完全读取并显示了 CSV 文件。现在，问题来了，我也必须整合 React。这就是我搞砸的地方。如果对您有帮助，这是我的 React 代码。

 const[csvupload,setCsvUpload] = useState()

useEffect(()=> {

  fetch('http://127.0.0.0:5000/display',{

    'method':'POST',

    headers: {

      'Content-Type' : 'application/json'

    }

  })

  .then(resp => resp.json())

  .then(resp => setCsvUpload(resp))

  .catch(error => console.log(error))

},[])

  return (

   

    <Fragment>

      <div className="upload" >

          Upload Your CSV File
       
            <Row md={12}>

                <Col md={6} className="body-upload">

                <input type="file" accept=".csv" onChange={handleFileUpload} multiple />  

                <button onClick={modalOpen}> UPLOAD </button>

                </Col>
            </Row>

            {csvupload.map(csv =>{

              return( 
(**What should be here?**)

                <div>


                </div>

              )

            })}

      </div>

    </Fragment>

  );

};

export default UploadFile;

如何通过 React return CSV 文件？我在这里使用 fetch，它是正确的方法吗？我应该在 return 方法中放什么，这样当我上传 csv 时，它应该读取文件，存储在“static/csv”（如烧瓶代码中给出的那样）并在单击之前显示下面的文件上传。我知道这是一个很长的问题，但请帮忙。 如有任何帮助，我将不胜感激，我愿意提供所需信息。

Answer 1

您可以做的几件事：

您对 /display 的调用没有发送有效负载。如果是这种情况，您可以更改为 GET 调用
直接在前端解析 csv 可能会占用大量资源，具体取决于内容。您最好在后端本身解析它，然后发送 JSON 做出如下所示的反应（或根据您的需要的任何其他结构）：

// option1
{
  row1: [col1, col2],
  row2: [col1, col2]
}

// or send an array of rows

// option2
[[col1, col2], [col1, col2]]

一旦你有了解析的 csv 内容，你就可以像这样在 react 上使用它：

// option 2
{
  csvupload.map((row) => {
    // you can format as per your requirement 
    // col1=row[0] and col2=row[1]
    return <div>{row}</div>;
  })
}

// option 1
{
  Object.keys(csvupload).map((rowIndex) => {
    // you can format as per your requirement 
    // col1=csvupload[rowIndex][0] and col2=csvupload[rowIndex][1]
    return <div>{csvupload[rowIndex]}</div>;
  })
}

我个人觉得选项 1 会更好。但是您可以根据最适合您的要求更改此结构。

编辑：根据评论

此答案可能有助于解析 what to do、
以及所用函数的文档further info in docs
在选项 1 中，Object.keys(csvupload) returns 键数组。 rowIndex 是这个数组的索引。当传入 csvupload JSON 时，它 returns 列数组 [col1, col2]
在选项 2 中，行是该特定行中的列数组 [col1, col2]（与选项 1 相同）
两个选项给出相同的结果。这只是您访问值的方式不同

使用 React 前端和 Flask 后端显示 CSV 文件

Displaying a CSV file using react frontend and flask backend

html

javascript

csv

flask

reactjs