[Flask]画像アップローダーでアップロードした画像が表示されない

Question

前提・実現したいこと

以下の記事を参考に、画像アップローダーを作っています。
自分の場合はフロントをReactで実装しています。
画像をアップロードしてflaskのuploadsディレクトリに画像ファイルをsaveできることは確認しました。
しかし、いざ直接"http://localhost:5000/uploads/画像名"のようにアクセスすると真っ白のままで何も表示されません。ログをみてみると200とあるので成功しているという状況です。
pythonのコード自体はあってそうなので、もしかすると画像ファイルがダメだったりするのでしょうか。
わかる方がいましたら、コメントお願いします。

####参考
https://qiita.com/keimoriyama/items/7c935c91e95d857714fb

発生している問題・エラーメッセージ

127.0.0.1 - - [30/Dec/2020 13:52:51] "GET /uploads/20201227_112133_65D9F95F-E5EA-4599-9A1D-5F0A81E63A45.png HTTP/1.1" 200 -

該当のソースコード

from flask import Flask, request, make_response, send_from_directory
import os
from datetime import datetime
import werkzeug

app = Flask(__name__)

# データサイズの上限:1MB
app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024
UPLOAD_DIR = os.getenv('UPLOAD_DIR_PATH') # ./uploads


@app.route('/upload_image', methods=['POST'])
def upload_image():
    if 'file' in request.files['image']:
        return make_response(jsonify({'result':'file is empty.'}))
    file = request.files['image']
    fileName = file.filename
    saveFileName = datetime.now().strftime('%Y%m%d_%H%M%S_') + werkzeug.utils.secure_filename(fileName)
    file.save(os.path.join(UPLOAD_DIR, saveFileName))

    return make_response(jsonify({'access_url':'http://localhost:3001/uploads/' + saveFileName }))


@app.errorhandler(werkzeug.exceptions.RequestEntityTooLarge)
def handle_over_max_file_size(error):
    return make_response(jsonify({'result':'file size is overed.'}))


@app.route('/uploads/<filename>', methods=['GET'])
def show_uploaded_file(filename):
    print(os.getenv('UPLOAD_DIR_PATH'))
    return send_from_directory(os.getenv('UPLOAD_DIR_PATH'), filename)


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

import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [imageFormData, setImageFormData] = useState();

  const handleSetImage = (e) => {
    if (!e.target.files) return;
    const image = e.target.files[0];
    setImageFormData(image);
  };

  function handleSubmit() {
    const params = new FormData();
    if (!imageFormData) return;
    params.append("image", imageFormData);

    axios.post(`/upload_image`, params, {headers: {'Content-Type': 'multipart/form-data' }}).then((res) => {
      console.log(res);
    });
  }

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit}>
          <label>
            Upload file:
            <input
              type="file"
              name="file"
              accept=".png,.jpg"
              onChange={(e) => handleSetImage(e)}
            />
          </label>
          <br />
          <button type="submit">Submit</button>
        </form>
      </header>
    </div>
  );
}

export default App;

###試したこと

//console.log(e.target.files[0])
File {name: "65D9F95F-E5EA-4599-9A1D-5F0A81E63A45.png", lastModified: 1603460608788, lastModifiedDate: Fri Oct 23 2020 22:43:28 GMT+0900 (日本標準時), webkitRelativePath: "", size: 312117, …}
lastModified: 1603460608788
lastModifiedDate: Fri Oct 23 2020 22:43:28 GMT+0900 (日本標準時) {}
name: "65D9F95F-E5EA-4599-9A1D-5F0A81E63A45.png"
size: 312117
type: "image/png"
webkitRelativePath: ""

Comments

[A_kirisaki]

アップロードできた画像をビューワーなどで直接除きに行くことは出来ますか？

[aiai8976]

今、finderから直接開こうとしたのですが、空だと言われました。

[A_kirisaki]

React のアップロード部分のコード見せてください

[aiai8976]

追加しました。確認お願いします。

Answer 1

axios.post の第 3 引数に {headers: {'Content-Type': 'multipart/form-data' }} を渡してあげてみてください。

追記

ドキュメントをよく読もう！

わたしがです！

Uploading Files — Flask Documentation (1.1.x)
解決法：

...
def upload_image():
    if 'file' in request.files: # <--- ここ！！！
        return make_response(jsonify({'result':'file is empty.'}))
    file = request.files['image']
...

なぜ 'file' in request.files['image'] ではダメなのか

標準入出力を始めファイル、ネットワークなどは最後まで読み切ってからデータを処理するのでは遅いので読み込みながら処理をします。これをストリーミング処理といい、そのデータが湧いてくる部分自体をストリームと言います。ストリーミング処理はデータを全部残しておくとメモリを圧迫するので、必要な分を返したら捨ててしまいます。

それで Flask もデータを効率よく処理するために Werkzeugの ストリーム処理を行うクラスを使っています。そしてここにある Request というクラスがその処理を担っているんですが、アクセスできるデータは全部ストリームなんです。request.files['image'] を呼んだ瞬間ストリーミング処理がバッと走って、その結果を代入しないと次 request.files['image'] を見に行っても中身が空、というわけなんですね。

という挙動がちゃんとドキュメントに書いてありました！ごめんドキュメント！！
Dealing with Request Data — Werkzeug Documentation (1.0.x)

Comments

[aiai8976]

追加してみましたが、空のままでした、、

[A_kirisaki]

console.log(e.target.files[0]) するとどうなりますか？

[aiai8976]

追加したので、確認お願いします。

[aiai8976]

めちゃくちゃ勉強になりました！ありがとうございました。