使用 React 前端和 flask 后端顯示 CSV 文件

Question

我正在嘗試使用 flask 讀取一個 csv 文件，然后通過 react 顯示它（顯示部分應該通過 react強制完成）。 我被困在 js 文件的返回部分。

這是燒瓶（ .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;

如何通過反應返回CSV文件？ 我在這里使用 fetch，它是正確的方法嗎？ 我應該在 return 方法中放入什么，以便當我上傳 csv 時，它應該讀取文件，存儲在“static/csv”中（如 flask 代碼中給出的那樣）並在單擊上傳之前顯示下面的文件。 我知道這是一個很長的問題，但請幫忙。 任何有點幫助將不勝感激，我願意提供所需的信息。

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 會更好。 但是您可以根據最適合您的要求來更改此結構。

編輯：基於評論

這個答案可能有助於解析要做什么，
function 的文檔在文檔中使用了更多信息
在選項 1 中，Object.keys(csvupload) 返回一個鍵數組。 rowIndex 是這個數組的索引。 當傳遞到 csvupload JSON 時，它返回列數組[col1, col2]
在選項 2 中，行是該特定行中的列數組[col1, col2] （與選項 1 相同）
兩個選項給出相同的結果。 這只是您訪問價值的方式不同

使用 React 前端和 flask 后端顯示 CSV 文件

問題描述

1 個解決方案

解決方案1
1 已采納 2022-05-02 08:21:40

使用 React 前端和 flask 后端顯示 CSV 文件

問題描述

1 個解決方案

解決方案1 1 已采納 2022-05-02 08:21:40

解決方案1
1 已采納 2022-05-02 08:21:40