ajaxでBLOBデータをPOSTできない

Question

javascriptでcanvasにより画像データを生成後、BLOBデータに変換してajaxにPOSTしてMySQLのカラムを更新するコードを作成しておりますが、MySQLの該当カラムが更新できなく困っております。

以下の通りコードを抜粋しました。
仕組みとしては、main.phpからajaxでset_latlng.phpにPOSTし、login_userの該当レコードのwind_directionカラムを更新するというものです。

main.php

・
・
・
function Base64toBlob(base64) {
                        // カンマで分割して以下のようにデータを分ける
                        // tmp[0] : データ形式（data:image/png;base64）
                        // tmp[1] : base64データ（iVBORw0k～）
                        var tmp = base64.split(',');
                        // base64データの文字列をデコード
                        var data_spl = atob(tmp[1]);
                        // tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
                        var mime = tmp[0].split(':')[1].split(';')[0];
                        //  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
                        var buf = new Uint8Array(data_spl.length);
                        for (var i = 0; i < data_spl.length; i++) {
                            buf[i] = data_spl.charCodeAt(i);
                        }
                        // blobデータを作成
                        var blob = new Blob([buf], { type: mime });
                        //var blob_png = new Blob([buf]);
                        return blob;
                    }
                    // base64データをblobに変換
    　　　　　　　　　var blob_png = Base64toBlob(png);
                    console.log(blob_png);
                    console.log(hoge);
                    function insert_latlng(){
                        $.ajax({
                            url: "set_latlng.php",
                            type: "POST",
                            processData: false,//Uncaught TypeError: Illegal invocation が出ないようにするために
                            //dataType: "text",
                            data: {
                                "login_user" : hoge,
                                //"latitude" : latitude,
                                //"longitude" : longitude,
                                "wind_direction" : blob_png
                            },
                        }).done(function(data){
                            console.log("DB通信完了_PUT");
                            console.log(data);
                        }).fail(function(data){
                            console.log("DB通信失敗_PUT");
                            console.log(data);
                        });
                    };
                    insert_latlng();
・
・
・

set_latlng.php

<?php
ini_set('display_errors',1); //これ重要

session_save_path('/home/****/session');
session_start();

require 'database.php';

if (!empty($_POST['login_user']) && !empty($_POST['wind_direction'])) {

    $login_user = $_POST['login_user'];
    $wind_direction = $_POST['wind_direction'];
    $pdo = connect();
    $stmt2 = $pdo->prepare("UPDATE User3 SET wind_direction_image = $wind_direction WHERE user_name = '$login_user'");
    $stmt2->execute();
    
}

?>

mysql> show columns from User3;
+----------------------+------------------+------+-----+---------+----------------+
| Field                | Type             | Null | Key | Default | Extra          |
+----------------------+------------------+------+-----+---------+----------------+
| id                   | int(11) unsigned | NO   | PRI | NULL    | auto_increment |
| user_name            | varchar(64)      | NO   | UNI |         |                |
| password             | varchar(255)     | NO   |     |         |                |
| latlng               | geometry         | NO   | MUL | NULL    |                |
| image_boat           | int(11) unsigned | YES  |     | NULL    |                |
| image_wave           | int(11) unsigned | YES  |     | NULL    |                |
| wind_direction_image | longblob         | YES  |     | NULL    |                |
+----------------------+------------------+------+-----+---------+----------------+
7 rows in set (0.01 sec)

main.phpに記載の該当コードのコンソールログは以下の赤字枠内となっております。
console.log(blob_png);
console.log(hoge);
はそれぞれコンソール上表示できてます。

ajaxのPOSTの後、console.log(data);が空表示されております。
chorme開発ツール内で、Network→Headers→FormDataの内容を確認すると、データが空でした。

なにか原因の切り分けも含め、解決に向けてご教示いただければ幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

送信側のコードもご提示ください。(要はHTML,JavaScript）

Answer 1

わざわざ$.ajaxつかうくらいならfetchで処理してみてください
画像をおくるなら受け側は$_FILESになると思います

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const canvas = document.createElement( "canvas" ) ;
canvas.width=200;
canvas.height=200;
const context = canvas.getContext( "2d" ) ;
context.beginPath () ;
context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fillStyle = "rgba(255,0,0,0.8)" ;
context.fill() ;
context.strokeStyle = "purple" ;
context.lineWidth = 8 ;
context.stroke() ;
const type = 'image/png';
const dataurl = canvas.toDataURL(type);
const bin = atob(dataurl.split(',')[1]);
const buffer = new Uint8Array(bin.length);
[].forEach.call(bin,(x,y)=>buffer[y]=bin.charCodeAt(y));
const blob = new Blob([buffer.buffer], {type});
console.log(blob);
document.querySelector('#view').appendChild(canvas);
const url='send.php';
const body=new FormData();
body.append("myfile", blob,"test.png");
const method = "POST";
fetch(url, {method, body}).then(data=>data.text()).then(console.log)

});
</script>
<div id="view"></div>

[yambejp]

//send.php
<?PHP
print_r($_FILES);

[hiro-chan]

ご教示ありがとうございます。少し仕様を変えることにしました。

Answer 2

<form action="/upload" method="post" enctype="multipart/form-data" id="imgForm">
  <fieldset>
    <input type="file" name="file" id="sendFile">
    <button type="submit">送信</button>
  </fieldset>
</form>

formのプロパティでenctype="multipart/form-data"を指定していないという可能性はないでしょうか？

Comments

[hiro-chan]

ご教示ありがとうございます。少し仕様を変更することにしました。

Answer 3

初歩的なミスでした。
・main.phpにおいて、function insert_latlng()で変数のhogeとblob_pngのスコープ外に定義してあったため、 insert_latlng();を実行した際に引数としてこれら変数を与える必要がありました。

また、画像データのdatabaseへのBLOB型のinsertについて、そもそも画像をdatabseに保存する事がナンセンスと気づきました。単純にサーバにajaxでPOSTして、関数imagepng()で画像の保存先PATHを指定して画像としてサーバ本体に保存で済みました。
様々な知見をいただきありがとうございました。