Flaskを使ってHTMLに表示をさせたいです。

Flaskを使ってHTMLに表示をさせたいです。
csvアップロードボタンで選択されたcsvの表示をさせたいのですがうまくいかず質問させていただきました。

python
1from flask import Flask,render_template,request
2from models.models import OnegaiContent
3from models.database import db_session
4from datetime import datetime
5from flask import Flask, request, redirect, url_for
6from werkzeug.utils import secure_filename
7from flask import send_from_directory
8import pandas as pd
9import io, pkgutil, os
10
11app = Flask(__name__)
12
13
14@app.route("/")
15@app.route("/index")
16def index():
17    name = request.args.get("name")
18    return render_template("index.html",name=name)
19
20
21
22def allowed_file(filename):
23    ALLOWED_EXTENSIONS = set(['csv'])
24    return '.' in filename and \
25           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
26
27@app.route('/', methods=['POST'])
28def upload_file():
29    UPLOAD_FOLDER = 'app/uploads'
30    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
31
32    if request.method == 'POST':
33        # check if the post request has the file part
34        if 'file' not in request.files:
35            flash('No file part')
36            return redirect(request.url)
37        file = request.files['file']
38        # if user does not select file, browser also
39        # submit a empty part without filename
40        if file.filename == '':
41            flash('No selected file')
42            return redirect(request.url)
43        if file and allowed_file(file.filename):
44            uni_string = file.stream.read()     
45            df = pd.read_csv(io.BytesIO(uni_string), encoding='utf8')
46            for i in df.columns.values[1:]:
47                print(i)
48            filename = secure_filename(file.filename)
49            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
50            return redirect(url_for('uploaded_file',
51                                    filename=filename))
52    return df, i 
53@app.route('/uploads/<filename>')
54def uploaded_file(filename):
55    return render_template("upload.html", filename=filename)
56
57if __name__ == "__main__":
58    app.run(debug=True)

index.html

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>{{name}}</title>
5    </head>
6    <h1>Upload new File</h1>
7    <form method=post enctype=multipart/form-data>
8      <p><input type=file name=file>
9         <input type=submit value=Upload>
10    </form>
11    </body>
12</html>

upload.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>DataFrame表示テスト</title>
6</head>
7<body>
8<h1>{{df}}</h1>
9<h1>{{i}}</h1>
10<h1>表示中</h1>
11</body>
12</html>

htmlでは「表示中」だけ出ており、　変数の df と i は表示されませんでした。
ターミナルには出力されたので値はしっかり入ってるかと思うのですが、htmlへの渡し方がわかりません。
わかる方教えてください。よろしくお願いいたします。
CSVファイルをpandasに展開する方法
 Flask公式サイト

退会済みユーザー

2020/02/19 09:32

df,iって{{}}で囲まれてますけどなんかのライブラリでしょうか？後、HTMLからPython側にアクセスしているようには見えませんがどういう想定でしょうか？

Mario_11

2020/02/19 10:10

ライブラリなのかはわかりませんがpythonの変数をhtmlに渡すことができるそうです。 https://christmas-cookies.hatenablog.com/entry/2018/08/06/010709

退会済みユーザー

2020/02/19 10:17

あ、すみません、FlaskでHTMLを読み取って返す想定ですね。その下のHTMLが、uploaded_fileで返してるupload.htmlでしょうか？

Mario_11

2020/02/19 10:24

そうです！追記しておきます！

can110

2020/02/19 12:54

提示コードを実行してみましたが「csvアップロードボタンで選択されたcsvの表示をさせ」る動き（html）がないためか、アップロード動作できません。

Mario_11

2020/02/19 13:08

すいません、端折っていた箇所がありました。追記しましたのでお手隙の際に回答いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず以下のような感じで最低限の見栄えでアップロードされたCSVをテーブル表示できます。

app.py

Python
1# 略
2
3@app.route('/uploads/<filename>')
4def uploaded_file(filename):
5    df = pd.read_csv(os.path.join(app.config['UPLOAD_FOLDER'], filename))
6    tbl = df.to_html()
7    print(tbl)
8    return render_template("upload.html", tbl=tbl)

render.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>DataFrame表示テスト</title>
6</head>
7<body>
8<!-- {{変数|safe}}で変数にセットされたhtmlが埋め込まれる -->
9<div>{{tbl|safe}}</div>
10<h1>表示中</h1>
11</body>
12</html>