前提・実現したいこと
以下の記事を参考に、画像アップローダーを作っています。
自分の場合はフロントを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 -
該当のソースコード
app
1from flask import Flask, request, make_response, send_from_directory 2import os 3from datetime import datetime 4import werkzeug 5 6app = Flask(__name__) 7 8# データサイズの上限:1MB 9app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024 10UPLOAD_DIR = os.getenv('UPLOAD_DIR_PATH') # ./uploads 11 12 13@app.route('/upload_image', methods=['POST']) 14def upload_image(): 15 if 'file' in request.files['image']: 16 return make_response(jsonify({'result':'file is empty.'})) 17 file = request.files['image'] 18 fileName = file.filename 19 saveFileName = datetime.now().strftime('%Y%m%d_%H%M%S_') + werkzeug.utils.secure_filename(fileName) 20 file.save(os.path.join(UPLOAD_DIR, saveFileName)) 21 22 return make_response(jsonify({'access_url':'http://localhost:3001/uploads/' + saveFileName })) 23 24 25@app.errorhandler(werkzeug.exceptions.RequestEntityTooLarge) 26def handle_over_max_file_size(error): 27 return make_response(jsonify({'result':'file size is overed.'})) 28 29 30@app.route('/uploads/<filename>', methods=['GET']) 31def show_uploaded_file(filename): 32 print(os.getenv('UPLOAD_DIR_PATH')) 33 return send_from_directory(os.getenv('UPLOAD_DIR_PATH'), filename) 34 35 36if __name__ == "__main__": 37 app.run(debug=True) 38
APP
1import React, { useState } from "react"; 2import "./App.css"; 3import axios from "axios"; 4 5function App() { 6 const [imageFormData, setImageFormData] = useState(); 7 8 const handleSetImage = (e) => { 9 if (!e.target.files) return; 10 const image = e.target.files[0]; 11 setImageFormData(image); 12 }; 13 14 function handleSubmit() { 15 const params = new FormData(); 16 if (!imageFormData) return; 17 params.append("image", imageFormData); 18 19 axios.post(`/upload_image`, params, {headers: {'Content-Type': 'multipart/form-data' }}).then((res) => { 20 console.log(res); 21 }); 22 } 23 24 return ( 25 <div className="App"> 26 <header className="App-header"> 27 <form onSubmit={handleSubmit}> 28 <label> 29 Upload file: 30 <input 31 type="file" 32 name="file" 33 accept=".png,.jpg" 34 onChange={(e) => handleSetImage(e)} 35 /> 36 </label> 37 <br /> 38 <button type="submit">Submit</button> 39 </form> 40 </header> 41 </div> 42 ); 43} 44 45export default App; 46
###試したこと
//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: ""
回答1件
あなたの回答
tips
プレビュー