質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2227閲覧

400 Bad Request: The browser (or proxy) sent a request that this server could not understand.

aiai8976

総合スコア112

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/12/24 09:03

編集2020/12/24 09:04

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

multipart 形式でデータを送ると request.files に入るようです。
API — Flask Documentation (1.1.x)

投稿2020/12/24 11:26

A_kirisaki

総合スコア2853

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問