excel表格通过前端fetch上传至后端flask处理流程示例

一粒马豆2025-09-26 9:07

前端网页index.html代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

        <input type="file" name="file" accept=".xlsx,.xls">
        <input type="submit" value="上传" onclick="upload()">

        <script>
            function upload(){
                var file = document.querySelector('input[name="file"]').files[0];
                if (!file) {
                    alert('请选择文件excel文件');
                    return;
                }
                var formData = new FormData();
                formData.append('file', file);
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                }).then(res => res.text()).then(data=>{
                    let filename=JSON.parse(data).filename;
                    let filedata=JSON.parse(data).filedata;
                    console.log(filename+" 文件已经上传成功了！");
                    console.log(filedata);
                    alert(filename+" 文件已经上传成功了！");
                }).catch(err=>{
                    console.log(err);
                    console.log('上传失败'+err);
                    alert('上传失败'+err);

                });
            }
        </script>
</body>
</html>

后端main.py代码：

python 复制代码

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

app = Flask(__name__,template_folder='')

#前端显示文件上传界面：
@app.route('/')
def index():
    return render_template('index.html')

#后端接收处理前端传来的文件：
@app.route('/upload',methods=['POST'])
def upload():
    # 接收文件
    file = request.files['file']
    # 保存文件
    #file.save(file.filename)
    # 读取文件流，无需保存文件
    df=pd.read_excel(file.stream)
    #遍历excel文件的每一行
    #待插入数据库的数据
    params=[]
    for index, row in df.iterrows():
        print(row[0], row[1])
        #获取excel文件的第1列和第2列数据,标题行除外
        params.append((row[0],row[1]))
    #将结果以json格式返回
    res=jsonify({'filename': file.filename,'filedata':params})
    
    # 2XX 成功
    # 3XX 重定向
    # 4XX 客户端错误
    # 5XX 服务器错误
    # 响应状态码200代表HTTP OK，表示服务器已成功处理了请求并返回了请求的资源。
    
    return res,200

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