バイナリデータをJavaScriptからサーブレットに送る方法。
Base64を使ってAjaxで送信。
参考URL
このサイトはJSP/サーブレットで作っていて、管理画面の設計上、画像データをJavaScriptからサーブレットに送りたい状況が発生していました。
この機能の作成に大分苦労していましたが、解決できたのでメモ。

JavaScript側の処理
全体の流れとしては、
1. ファイルをArrayBufferに変換
2. ArrayBufferをUint8Arrayに変換
3. Uint8Arrayの配列を文字列に変換
4. 文字列をBase64に変換
5. Ajaxでサーブレットに送信
といったものになっています。下がそのコード全文です。
function
sendBinary(file)
{
const
reader
=
new
FileReader();
reader.onload
=
function(e)
{
// ArrayBufferをUint8Arrayに変換
const
unit8Array
=
new
Uint8Array(e.target.result);
const
decodeBinaryString
=
uint8Array
=>
uint8Array.reduce(
(binaryString,
uint8)
=>
binaryString
+
String.fromCharCode(uint8),'',);
// Uint8Arrayを文字列に変換
const
binaryString
=
decodeBinaryString(unit8Array);
// Uint8Array文字列データをBase64に変換
const
base64
=
btoa(binaryString);
// Ajaxでservletにリクエストを送信
var
request
=
{
base64
:
base64,
};
$.ajax({
type
:
"POST",
url
:
[アクセスしたいサーブレットのURL]
,
data
:
request
});
};
// 引数のFileをArrayBufferに変換
reader.readAsArrayBuffer(file);
}

Javaサーブレット側の処理
サーブレットの方は幾分かシンプルで、
1. 設定されたBase64のリクエストを取得
2. Base64をByte[]に変換
3. ファイルの書き込み
という流れです。下がそのコード全文になります。
@WebServlet(urlPatterns
=
{
[任意のアノテーション]
})
public
class
TransportImage
extends
HttpServlet
{
public
void
doPost(HttpServletRequest
request,
HttpServletResponse
response)
throws
ServletException,
IOException
{
//リクエストパラメータを取得
String
base64
=
request.getParameter("base64");
//元々のByteの配列データへ戻す
Base64.Decoder
decoder
=
Base64.getDecoder();
byte[]
decoded
=
decoder.decode(base64.getBytes(StandardCharsets.UTF_8));
//ファイルの書き込み
FileOutputStream
fileOutoutStream
=
new
FileOutputStream(
[書き込みしたい任意のファイルパス]
);
fileOutoutStream.write(decoded);
fileOutoutStream.close();
}
}
0
0