canvasで作成した画像をperlでアップロード

質問

恐れ入ります。

function upImg()
{
var base64 = board1.toDataURL('image/png');
var request = {
url: 'https:～canvas.cgi',
method: 'POST',
params: {
image: base64.replace(/^.*,/, '')
},
success: function (response) {
console.log(response.responseText);
}
};
Ext.Ajax.request(request);
}
として、perlで送信された画像データを受け取ってサーバーの任意のディレクトリに保存をしたいのですが、方法が分かりません。

perl側では、単純に
open(OUT, ">./upload/gazouURL");
binmode(OUT);
while(read($fileName, $buffer, 1024))
{
print OUT $buffer;
}
close(OUT);

としています。$fileNameとして受け取るパラメータはjavascriptからどのように送信されているのでしょうか。ご教授いただけたらありがたいです。よろしくお願いいたします。

回答No.1

AsarKingChang

この場合perlはあまり関係なくてブラウザから
Webサーバーが何を受け取るか？だけですね。

https://www.yoheim.net/blog.php?q=20171201
中身はこういう形式の、
マルチパートフォームデータというものになります。
params: {
image: base64.replace(/^.*,/, '')
},
ここが、まだまだ追加可能な形式をしているのはこのためで、
画像のほか同時に変数などの値や、文字などを
複数混ぜて同時に送れます。

なのですが、そこでbase64がやっかいで。
これはバイナリデータをテキストにしている
（6ビットスライドデータ）
こいつの関係で送信データが1.5倍程度に膨れ上がります。
非力なサーバーで画像送信が遅いかエラーがでるのは
このためです。

で、Webサーバーが受け取った後は、
自動的に分解され、テンポラリファイルに格納してあり、
そのテンポラリがPerlに来てるという具合です。

が、このソースどっちもOUTじゃない？？？
ただ送り返すだけ（実体ファイルは別途作られてるようだが）

ブラウザでファイル選択して、
「送らず」に送ったことにして出来上がったテキストデータを、
画像であるimgオブジェクトにすると、送らずに開けますよ＾＾
で、それをCanvasにすれば、ファイル選択－＞Canvasに取り込み
は、ブラウザ内で完結できますよ～（ただし、CORSに注意）
で、何らかの経路を使った後、完成したら
それを送り出せばいいんじゃないかな～って
感じた（何がしたいのかは、知らないので。違う話ならごめん）

お礼

ご回答ありがとうございます。ajaxやjavaは無知なもので、大変申し訳ありません。パラメータをperlにどのように飛ばしたらよいでしょうか。具体的な記述などがお分かりであればご教授いただけるとありがたいです。params:{の中にnameと送信する文字列を指定するような感じですが、まったく動作しないです。ちなみに、perl側でwhile(read($fileName, $buffer, 1024))の部分の$filenameに受け取ったパラメータを格納したい感じです。例えば、ファイル名としてcanvas.pngみたいなものをパラメータとして受け取って、canvas.pngが飛んで来たらアップロードするみたいなイメージです。よろしくお願いいたします。