前提・実現したいこと
ReactとFlaskの画像アップローダーアプリを作っています。
以下のurlを参考に作ってみたのですが、エラーが出て困っています。
FormDataオブジェクトを利用しており、挿入や参照の仕方は正しいように思います。
わかる方がいましたらコメントお願いします。
####参考
https://reiji1020.hatenablog.com/entry/2018/12/31/113202
発生している問題・エラーメッセージ
flask console
400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
該当のソースコード
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; console.log(imageFormData); params.append("image", imageFormData); axios .post(`http://localhost:3001/send_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;
from flask import Flask, request app = Flask(__name__) @app.route('/send_image', methods=['POST']) def send_image(): print(request.form['image']) res = "ok" return res if __name__ == "__main__": app.run(debug=True)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。