JavascriptからAjaxを使ってPythonにデータを受け渡し

前提

flaskを用いてwebアプリを作っています。
JavascriptからAjaxを使ってPythonにデータを受け渡したいと思ってます。
データはBlobです。Python側でrequest.form['blob']とするとエラーを吐きます。

実現したいこと

Javascriptで画像をトリミングし、その結果をAjaxを使ってPythonにデータを受け渡したい。

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

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
KeyError: 'blob'

該当のソースコード

JavaScript
1function send_data(blob){
2     var fData = new FormData();
3     fData.append('blob', blob);
4     //ajax送信
5     $.ajax({
6         //画像処理サーバーに返す
7         url: 'http://127.0.0.1:5000/top',   
8         type: 'POST',
9         data: fData,
10         dataType: 'binary',
11         responseType:'blob',
12         processData: false,
13         success: function(data, dataType) {
14             //非同期で通信成功時に読み出される [200 OK 時]
15             console.log('Success', data);
16         },
17         error: function(XMLHttpRequest, textStatus, errorThrown) {
18             //非同期で通信失敗時に読み出される
19             console.log('Error : ' + errorThrown);
20         }
21     });
22

Python
1@app.route('/top', methods=['GET', 'POST']) 
2def post():
3    if request.method == 'POST':
4        enc_data  = request.form['blob'] #ここでエラーが起きる
5        dec_data = base64.b64decode( enc_data.split(',')[1] ) # 環境依存の様(","で区切って本体をdecode)
6        dec_img  = Image.open(BytesIO(dec_data))
7        dec_img.save("test222.png")
8        return redirect('/test')
9    else:
10        return render_template('top.html')

試したこと

Python側でprint(request.form)を実行するとターミナルに大量の文字が出力されていたのでrequestの中にはBlobが入っていると考えられます。

補足情報（FW/ツールのバージョンなど）

Python3.8.5
フレームワーク:flask
Ajaxは<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
で読み込んでいて動作確認はできています。

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

回答1件

凄く適当に、以下でためしました。

python
1from flask import Flask, render_template, request, redirect
2
3app = Flask(__name__)
4
5
6@app.route('/test')
7def test():
8    return 'aaa'
9
10
11@app.route('/top', methods=['GET', 'POST'])
12def post():
13    if request.method == 'POST':
14        enc_data = request.form['blob']
15        return redirect('/test')
16    else:
17        return render_template('top.html')
18
19
20if __name__ == '__main__':
21    app.run()
22

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8<button onclick="send_data('bbb')">aaa</button>
9<script type="text/javascript">
10    function send_data(blob) {
11        var fData = new FormData();
12        fData.append('blob', blob);
13        //ajax送信
14        $.ajax({
15            //画像処理サーバーに返す
16            url: 'http://127.0.0.1:5000/top',
17            type: 'POST',
18            data: fData,
19            dataType: 'binary',
20            responseType: 'blob',
21            processData: false,
22            success: function (data, dataType) {
23                //非同期で通信成功時に読み出される [200 OK 時]
24                console.log('Success', data);
25            },
26            error: function (XMLHttpRequest, textStatus, errorThrown) {
27                //非同期で通信失敗時に読み出される
28                console.log('Error : ' + errorThrown);
29            }
30        });
31    }
32
33
34</script>
35<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
36
37</body>
38</html>

上記のbutton(aaa)を押すと、POSTは受け取っています。

デバッガで確認すると、request.formには以下が入っていました。(改行の数とかは間違っているかもしれません。)

text
1  '------WebKitFormBoundaryI8eOSB8zetxMcRV8\r\nContent-Disposition: form-data; name'='"blob"\r\nbbb\r\n------WebKitFormBoundaryI8eOSB8zetxMcRV8\r\nContent-Disposition: form-data; name="name"\r\n\r\nname\r\n------WebKitFormBoundaryI8eOSB8zetxMcRV8--\r\n'

Chromeの開発者ツールのネットワークで、topに対する通信のペイロードに入っているものと同じようです。
WebKitForm～～～が付く理由は調べてないのでわかりませんが、request.form['blob']で受け取ろうとしていて、['blob']が無いからエラーになっているんじゃないかと思います。

WebKitForm～～～が付く理由を調べて、['blob']で受け取れるように送れば解決すると思います。

PyCharmなどのIDEを使えばすぐにわかるので、IDEを使ってデバッグするのをお勧めします。

投稿2022/10/21 17:06