flaskの画像の読み込みがうまくいきません

flask初心者です．

flaskで画像を読み込んで，任意の角度で回転し最終的にネガポジ反転して出力するWEBアプリを作成しようとしています．

手順は以下のように考えています．．
STEP1：画像ファイルを選択
STEP2：回転角度の入力
STEP3：画像の回転
STEP4：ネガポジ反転

下画像はトップページと各ステップの完了のイメージです．

ここでSTEP1のファイルを選択して，送信ボタンを押すと以下のようなエラーが発生しました．
ファイルがうまく選択できていないということはわかりますが，どこをどのように直せば良いか，わからなかったのでご教授願います．
また，その他の工程で不備がありましたら，教えてください．

ソースコードは以下の通りです．

python
1#ファイル名：server.py
2from flask import Flask, request, redirect, url_for, render_template, send_from_directory
3import os
4from PIL import Image, ImageOps
5
6app = Flask(__name__)
7
8@app.route('/')
9def index():
10    return render_template('main.html')
11
12# 1.画像ファイルを選択
13@app.route('/step1',methods=['GET','POST'])
14def step1():
15    if request.method=='POST':
16        # 画像のアップロード先のディレクトリ
17        dir_name = '/sample'
18        UPLOAD_FOLDER = './uploads' + dir_name
19        os.makedirs(UPLOAD_FOLDER, exist_ok=True)
20        
21        # 1.変換する画像ファイルを選択
22        file = request.files.get('file_name')
23        # uploadに保存
24        filename = file.filename
25        # ファイルの保存
26        # img_path:'./uploads/sample/sample.jpg'
27        img_path = os.path.join(UPLOAD_FOLDER,filename)
28        file.save(img_path)
29        # 画像をサイトに表示
30        return render_template('main.html',img_path=img_path)
31
32
33@app.route('/step2_3',methods=['GET','POST'])
34def step2_3():
35    global filename
36    global UPLOAD_FOLDER
37    if request.method=='POST':      
38        # 2.作画条件の選定
39        # 角度
40        degree = 45
41        degree = request.form.get('degree')
42        
43        # 3.画像の回転
44        # 画像の読み込み
45        # img_path:'./uploads/sample/sample.jpg'
46        img_path = os.path.join(UPLOAD_FOLDER,filename)
47        im = Image.open(img_path)
48        
49        # 画像の回転
50        im_rotate = im.rotate(degree)
51        # 保存
52        # img_rotate_path:'./uploads/sample/sample_90.jpg'
53        fname = img_path.split('.')[0]
54        img_rotate_path = fname + '_{}.png'.format(degree)
55        im_rotate.save(img_rotate_path)
56        return render_template('main.html',img_path=img_rotate_path)
57  
58@app.route('/step4',methods=['GET','POST'])
59def step4():
60    global img_rotate_path
61    if request.method=='POST':          
62        # 4.ネガポジ反転に出力
63        # img_rotate_path:'./uploads/sample/sample_90.jpg'
64        # img_nega_path:'./uploads/sample/sample_90_nega.jpg'
65        im_invert = ImageOps.invert(img_rotate_path)
66        fname = img_rotate_path.split('.')[0]
67        img_nega_path = fname + '_nega.png'
68        im_invert.save(img_nega_path)
69        return render_template('main.html',img_path=img_nega_path)
70
71if __name__ == '__main__':
72    app.debug = True # デバッグモード有効化
73    app.run()

HTML
1/*  ./templates/main.html */
2<head>
3    <meta charset="utf-8">
4    <meta name="description" content="オリジナルアプリ">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">
8    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese" rel="stylesheet">
9    <link rel="stylesheet" href="../static/style.css">
10    <title>オリジナルアプリ</title>
11</head>
12   <body>
13    <div class="wrap">
14       
15        <header>
16            <h2 class="header_title">回転画像</h2>
17            <form action="/step1" method="post" id="step1">
18            <ul>
19                <li>
20                    <label for="file_name">
21                        <a>1.画像ファイルを選択</a>
22                        <input type="file" name="file_name" id="file_name" accept=".jpg,.png,.jpeg">
23                    </label>
24                    <label>
25                        <a>送信</a>
26                        <input type="submit" name="submit" value="送信" id="submit" required>
27                    </label>
28                </li>
29            </ul>
30            </form>
31
32            <form action="/step2_3" method="post" id="step2_3">
33            <ul>
34                <li><p align="center">2.回転条件の決定</p></li>
35                <p align="center">角度(デフォルト:45°)<br>
36                    <input type="text" name="degree" size="5"></p>
37                <li>
38                    <label>
39                        <a>3.画像の回転</a>
40                        <input type="submit" name="convert" value="convert">
41                    </label>
42                </li>
43            </ul>
44            </form>
45            
46            <form action="/step4" method="post" id="step4">
47            <ul>
48                <li>
49                    <label>
50                        <a>4.ネガポジ反転で出力</a>
51                        <input type="submit" name="dl_img" value="dl_img">
52                    </label>
53                </li>
54            </ul>
55            </form>
56        </header>
57        
58        <main>
59            {% if img_path %}
60            <img src="{{img_path}}">
61            {% endif %}
62        </main>
63    </div>

CSS
1/*  ./static/style.css */
2body {
3    box-sizing: border-box;
4    margin: 0;
5    padding: 0;
6}
7* {
8    box-sizing: inherit;
9}
10.wrap {
11}
12
13/* 共通
14------------------------------------------------------------*/
15h1, h2{
16    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
17}
18
19img{
20    max-width: 100%;
21    height: auto;
22}
23
24ul {
25    width: 200px;
26    margin: 0;
27    padding: 0;
28    list-style-type: none;
29}
30li a {
31    display: block;
32    padding: 8px 16px;
33    text-decoration: none;
34    color: #FFF;
35}
36li {
37    text-align: center;
38}
39li:last-child {
40    border-bottom: none;
41}
42li a.active {
43    color: #ffffff;
44    text-decoration: underline;
45}
46li a:hover:not(.active) {
47    color: #ffffff;
48    text-decoration: underline;
49    cursor: pointer;
50}
51
52/* 入力ボタン
53------------------------------------------------------------*/
54input[type="file"]{
55    font-size: 1.2rem;
56    margin-top: 0.5rem;
57    background-color: black;
58    display: none;
59    position: relative;
60}
61
62input[type="submit"]{
63    display: none;
64}
65
66/* ヘッダー
67------------------------------------------------------------*/
68header {
69    background: #008000;
70    padding: 0px;
71    position: fixed;
72    left: 0;
73    top: 0;
74    bottom: 0;
75    width: 300px;
76    color: #FFF;
77}
78
79.header_title{
80    padding: 30px 45px;
81    width: 200px;
82    color: #FFF;
83}
84
85.header_control{
86    padding: 30px 45px;
87    width: 200px;
88    color: #FFF;
89}
90
91
92/* メイン
93------------------------------------------------------------*/
94main {
95    padding: 20px;
96    background: #FFF;
97    position: absolute;
98    left: 200px;
99    right: 0;
100    top: 0;
101    bottom: 0;
102
103    /* メイン領域以外でもスクロール効くように */
104    padding-bottom: 160px;
105
106    /* スクロールがmain内に出ていいならこっちつかう */
107    /*height: calc(100vh - 160px);*/
108    /*overflow: auto;*/
109}
110
111/* メニュー
112------------------------------------------------------------*/
113mennu2 {
114    background: #ccc;
115    padding: 60px;
116    position: fixed;
117    left: 200px;
118    right: 0;
119    bottom: 0;
120    height: 80px;
121}
122
123/* フッター
124------------------------------------------------------------*/
125footer {
126    background: #eee;
127    padding: 10px;
128    position: fixed;
129    left: 0;
130    right: 0;
131    bottom: 0;
132    height: 30px;
133}
134
135.footer_title{
136    background: #eee;
137    padding: 10px;
138    position: fixed;
139    left: 0;
140    right: 0;
141    bottom: 0;
142    height: 0;
143    text-align: right;
144}

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

回答1件

ベストアンサー

formタグに属性としてenctype="multipart/form-data"がある場合のみrequest.filesにファイルデータが入ります。

flask.Request.files

Note that files will only contain data if the request method was POST, PUT or PATCH and the <form> that posted to the request had enctype="multipart/form-data". It will be empty otherwise.

投稿2020/04/05 13:58