【SAPUI5】UIからxsjsを経由してHANA DBに画像登録をする

12614 ワード
SAPCP HANA SAP SAPUI5 KYOSO SAP テキストリンク

HANA DBへの画像登録

はじめに

こんにちは。
HANAで作成したテーブルに対して，xsjsのREST APIを使用して画像アップロードする方法を調査しましたので共有します。
なお，今回の記事では画像ファイルをNCLOB型で作成したカラムに保存することを想定しています。

テーブル作成

SQL

xsjsでの扱いやすさの観点からデータ型はNCLOBで作成していきます。

CREATE COLUMN TABLE "STORE"."IMG_TEST"(
    "IMG_NAME" NVARCHAR(100),
    "IMG_VALUE" NCLOB ,
    PRIMARY KEY (
        "IMG_NAME"
    )
)

その他ファイルを扱えるデータ型

NCLOBの他にファイルを扱えるデータ型は以下です。

BLOB

BLOB データ型は、大量のバイナリデータを格納するために使用されます。BLOB 値は VARBINARY に変換できます。SAP HANA の BLOB データ型は SAP ASE の IMAGE データ型にマッピングされます。

CLOB

CLOB データ型は、大量の 7 ビット ASCII 文字データを格納するために使用されます。CLOB 値は VARCHAR に変換できます。SAP HANA の CLOB および BCLOB データ型は、SAP ASE の TEXT データ型にマッピングされます。

【参考資料】

UI側（保存処理）

fileUploaderの用意

ブラウザにファイルがアップロードができればなんでもいいですが，今回はsap.ui.unifiedのFileUploaderを使っていきます。
ここでchangeイベントを設定します change="onChangeImage"。

<un:FileUploader id="fileUploader" buttonOnly="true" change="onChangeImage" width="100px" fileType="jpg,png,jpeg" tooltip="Upload your file"/>

プレビューの表示

選択した画像のプレビューをUIに表示します。

View側

viewでidを設定

<Image class="imagePreview" width="600px" id="image"></Image>

Controller側

changeイベントでブラウザにアップロードされたファイルを取得し，viewのidに対してsrcを設定します。
また，ここでファイルデータをURLに整形しreader.readAsDataURL(file);，必要な情報と合わせてモデルにセットしておきます。

onChangeImage: function (oEvent) {
    var _this = this;
    var oView = _this.getView();

    if (oEvent.getSource().oFileUpload.files.length > 0) {
        var file = oEvent.getSource().oFileUpload.files[0];
        var reader = new FileReader();

        //dataURL形式でファイルを読み込む
        reader.readAsDataURL(file);

        //ファイルの読込が終了した時の処理
        reader.onload = function () {
            // 送信用にモデルにファイル（URL化）を保持
            var imgData = reader.result;
            var fileType = file.type;
            var params = {
                imgData: imgData,
                fileType: fileType
            };
            var paramsJson = new JSONModel(params);
            oView.setModel(paramsJson, "params");
        };

        // Viewに画像をセット
        var path = URL.createObjectURL(file);
        this.getView().byId("image").setSrc(path);
    }
}

画面イメージ

参照ボタン押下

アップロードする画像を選択

プレビュー表示

送信ボタン押下時処理

contentTypeにファイルのデータタイプを設定し，processDataはfalseにしています。
dataで送信するimageDataをURLのパラメータに設定しないために上記設定を記載します。

pressUploadButton: function () {
    var _this = this;
    var oView = _this.getView();

    var oFileUploader = this.getView().byId("fileUploader");
    var oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.session);
    var params = oView.getModel("params").oData;

    //ajax
    _this._setCSRFToken();
    $.ajax({
        type: "GET",
        url: "/xxx/xxx/app/api/imgUploadTest.xsjs?name=" + oFileUploader.getValue(),
        processData: false,
        contentType: params.fileType,
        method: "POST",
        async: false,
        data: params.imgData
    }).done(function (data) {
        console.log(data);
    });
},
_setCSRFToken: function () {
    var thisController = this;
    jQuery.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (settings && settings.hasOwnProperty("type") && settings.type !== "GET") {
                var token = thisController._getCSRFToken();
                xhr.setRequestHeader("X-CSRF-Token", token);
            }
        },
        complete: function (xhr, textStatus) {
            var loginPage = xhr.getResponseHeader("x-sap-login-page");
            if (loginPage) {
                location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname);
            }
        }
    });
},

_getCSRFToken: function () {
    var token = null;
    jQuery.ajax({
        url: "/xxx/xxx/app/api/csrf.xsjs",
        type: "GET",
        async: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-CSRF-Token", "Fetch");
        },
        complete: function (xhr) {
            token = xhr.getResponseHeader("X-CSRF-Token");
        }
    });
    return token;
}

xsjs（保存）

パラメータ取得

UIからajaxで送信されたパラメータを取得します。

var name = $.request.parameters.get("name");
var imgData = $.request.body.asString();

クエリ作成

// ■ db接続
var conn = $.db.getConnection();
conn.setAutoCommit(false);

// クエリの組み立て
var query = "INSERT INTO STORE.IMG_TEST (IMG_NAME, IMG_VALUE) VALUES ( ?, ? ) ";
var cntmt = conn.prepareStatement(query);
cntmt.setString(1, name);
cntmt.setString(2, imgData);
cntmt.execute();

テーブル確認

テーブルにデータが保存されていることを確認します。

UI（データ呼び出し）

今度は，保存された画像データをUIから呼び出して画面に表示します。

プレビュー用意

View側

こちらもidを指定します。

<Image class="imagePreview" width="600px" id="imageReturn"></Image>

画像呼び出し

Controller側

今回，URLパラメータ（name）はテーブルに登録されているIMG_NAMEを固定値でパラメータに設定します。

pressGetButton: function () {
    var _this = this;
    _this._setCSRFToken();

    var dataArr = {
        "name": "任意の画像名"
    };
    $.ajax({
        type: "GET",
        url: "/xxx/xxx/app/api/imgGetTest.xsjs",
        dataType: "json",
        method: "POST",
        async: false,
        data: dataArr
    }).done(function (data) {
        _this.getView().byId("imageReturn").setSrc(data[0].IMG_VALUE);
    });
},
_setCSRFToken: function () {
    var thisController = this;
    jQuery.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (settings && settings.hasOwnProperty("type") && settings.type !== "GET") {
                var token = thisController._getCSRFToken();
                xhr.setRequestHeader("X-CSRF-Token", token);
            }
        },
        complete: function (xhr, textStatus) {
            var loginPage = xhr.getResponseHeader("x-sap-login-page");
            if (loginPage) {
                location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname);
            }
        }
    });
},

_getCSRFToken: function () {
    var token = null;
    jQuery.ajax({
        url: "/xxx/xxx/app/api/csrf.xsjs",
        type: "GET",
        async: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-CSRF-Token", "Fetch");
        },
        complete: function (xhr) {
            token = xhr.getResponseHeader("X-CSRF-Token");
        }
    });
    return token;
}

レスポンスで取得したデータは指定したidに対してsetSrc()でパスとして設定します。

xsjs（描画）

パラメータ取得

UIからajaxで送信されたパラメータを取得します。

// ■ データ取得 
var name = $.request.parameters.get("name");

クエリ作成

// ■ db接続
var conn = $.db.getConnection();
conn.setAutoCommit(false);

// クエリの組み立て
var query = "SELECT IMG_NAME, IMG_VALUE FROM STORE.IMG_TEST WHERE IMG_NAME = ? ";
var cntmt = conn.prepareStatement(query);
cntmt.setString(1, name);
var rs = cntmt.executeQuery();
var retarr = [];
while (rs.next()) {
    var record = {
        "IMG_NAME": rs.getString(1),
        "IMG_VALUE": rs.getString(2)
    };
    retarr.push(record);
}

if (cntmt) {
    cntmt.close();
}

UIへのレスポンス

var output = JSON.stringify(retarr);
$.response.setBody(output);

UI確認

画像取得ボタン押下

プレビュー表示

おわりに

今回は画像ファイル登録のみの紹介になりますが，同様の方法で.csvや.xslxデータも扱えるかと思います。
ただ，データの上限や総データ量が増加した際の処理，挙動については確認できていないので，扱いには注意が必要です。

また，今回紹介させていただいた方法の他に，UI側からファイルの保存・使用方法として，
データ用にサーバを用意してファイル自体はそちらに保存し，DBにはファイルパスのみ登録する方法もあります。

データの扱いの面でメリットデメリットあるかと思いますので，特性を理解して適材適所で使い分けする必要がありそうですね。
また，ファイル保存について何か進展があればここに追記していきます。

参照資料

https://blogs.sap.com/2016/09/01/upload-and-retrieve-image-using-sap-hana-xs-sap-ui5/
https://blogs.sap.com/2017/03/14/how-to-post-an-image-from-sapui5-and-store-in-hana-db-as-blob-using-xsjs/
https://help.sap.com/viewer/cbed2190ee2d4486b0bbe0e75bf4b636/16.0.3.0/ja-JP/02b0331bcbaa414fb687dfccdbd64cbb.html
https://javascript.keicode.com/newjs/arraybuffer.php#1