JavaScriptからServletにBinaryの送信

JavaScriptからServletにBinaryの送信

バイナリデータを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