SAPUI5 (30)

来源：互联网发布：飞天侠淘宝干嘛的编辑：程序博客网时间：2024/04/29 02:53

数据库中对图片的保存可以采取二进制格式，也就是我们平常所说的 blob 类型 ( Binary large object)。当图片使用 blob 类型来存储的时候，OpenUI5 如何处理据呢？本篇就来作一个详细介绍。

使用 sap.m.Image 来显示图片

一般情况下，可以设置 sap.m.Image 的 src 属性，来显示一个本机或者网络的图片，比如：

var image = new sap.m.Image({    src: "http://sap.github.io/openui5/images/icotxt_white_220x72_blue_open.png"});

也可以把图片二进制文件通过 Base64 来编码，变成一个字符串，sap.m.Image 支持这种基于 Base64 编码的格式：

var oDataImage = new sap.m.Image({    src: "data:image/gif;base64,R0lGODlhHwAeANU/AO1SReW2N+14Kf3YACOAulrAWtTW02Gh1uPIx/BkVFXKXu3t7bjZuoi9R7nV8fbOG8fBulSlWvh8ZlW0WvTu0aG8QqK92sGkdcWjoPr5+WyrUUaiV7q0oHWs2vrTCYOeiJ94QulCOYK34ceNifHEJfLWRuLf3tomHUWUzeQxLf/cDc1+dtzCOqKzo83o92mxbPSSjP/ohspCL2K1WG7Ga+k5NIGfWcbKKcu5ceTPBvDKAJfRkIyvjVvEXeV4af///yH5BAEAAD8ALAAAAAAfAB4AAAb/wJ9wSPwtDBCMEmJYFJ/QXwYx8kmuWIlvBMlEoaZVIptNmBMrw5eIObvfZkACgFn/MIA8/J3vj74jfYJycYMAIYh/TxCIiIaGjYg1NRBFCzYhNZGbk42TNSmhmiZELQogKZ+SNQkwrhICsbKzF0MLLwozMqmTKQAICy7CCxQlOg8PHh4DAyoPTj8QPQWnoikJCw4i29sOGSXKzOIqlT88CgXTuykhJg4HHdwdBxYUKuLjOFIv09Q2JydguIDXoaDBAw5i4GOmgkWGW/2ogTiBQASKAxgzHkAhgsLCZs8WzIjYQ4MMBBs1Zrxo7+MDEyILyJR5CiWKmzhxHmi58OWtzJkye8xA0IFATpwEOnj8SGJBhhdAZ+5wQMBozqoJPw5waC5qUANFq4pNylOcBxX6ok3wWoCGAQtjCVgwUWKhsgflfrKlweCtBQsGGFT46OFBAGg/WkxYu3eH4xcRcuC7+4ADkQURFrOduXiw2cKGEQuBkJkx2wkzlg1QVpgEiXJFWpQ2DXTCjdWUXVuOInuxb84NKD9wTWL3Fw4bIsz2zQIZcRIBjK8x8SG58ggbKjyHfkGNHSIGqm9IHqB8gAvdvXx/cgQCh/dMREMJAgA7"});     oDataImage.placeAt("content");

这是一个 Google Chrome 浏览器的图标，通过 Base64 编码后，用 Image 控件来显示。

显示 Northwind data service 中的图片

我们先用 Postman 这个 Chrome 插件来看看 http://services.odata.org/V2/Northwind/Northwind.svc/Categories?$format=json 的请求结果：

我们可以看到 Picture 是以 Base64 编码的字符串。那么，这种图片类型，OData 的元数据是什么类型的呢？看看 Northwind 的元数据，数据类型是 Edm.Binary。OData 对 Edm.Binary 就是用 Base64 编码来转换成字符串传输的。请参看：http://www.odata.org/documentation/odata-version-2-0/json-format/ 的描述。

接下来给出显示 Northwind OData Service 的完整代码：

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>        <script src="../resources/sap-ui-core.js"                id="sap-ui-bootstrap"                data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.layout"                data-sap-ui-theme="sap_bluecrystal">        </script>        <script>            // Application data            var sUrl = "https://cors-anywhere.herokuapp.com/" +                        "services.odata.org/V2/Northwind/Northwind.svc/";            var oModel = new sap.ui.model.odata.v2.ODataModel(sUrl)            sap.ui.getCore().setModel(oModel);            sap.ui.getCore().attachInit(function(){                var oImage = new sap.m.Image({                    width: "200px",                    src: {path: "Picture",                          formatter: function(sValue){                              var sBase64BMP = btoa(atob(sValue).substr(78));                                 var sDataUrl = "data:image/bmp;base64," + sBase64BMP;                                 return sDataUrl;                          }                    }                });                var oForm = new sap.ui.layout.form.SimpleForm({                    content: [                        new sap.m.Label({text: "Picuture"}),                        oImage,                        new sap.m.Label({text: "Category ID"}),                        new sap.m.Input({value: "{CategoryID}"}),                        new sap.m.Label({text: "Category Name"}),                        new sap.m.Input({value: "{CategoryName}"}),                        new sap.m.Label({text: "Description"}),                        new sap.m.Input({value: "{Description}"}),                    ]                });                         var oApp = new sap.m.App({                    pages: [                        new sap.m.Page("categoryPage", {                            title: "Northwind Image Display",                            content: [                                new sap.m.Panel({                                    content: [oForm]                                                       })                            ]                        })                      ]                });                sap.ui.getCore().byId("categoryPage").bindElement("/Categories(1)");                            oApp.placeAt("content");                        });        </script>    </head>    <body class="sapUiBody" role="application">        <div id="content"></div>    </body></html>

对代码，解释两个部分：

SimpleForm: sap.ui.layout.form.SimpleForm 这个控件在展示扁平数据时候还是蛮方便的，控件对不同字段默认采取 Vertical layout, 每个字段包括 label 和内容显示，默认采取 Horizontal layout 。
Image 的代码，采用的是绑定方式，绑定到 Picture 字段：

var oImage = new sap.m.Image({    width: "200px",    src: {path: "Picture",            formatter: function(sValue){                var sBase64BMP = btoa(atob(sValue).substr(78));                    var sDataUrl = "data:image/bmp;base64," + sBase64BMP;                    return sDataUrl;            }    }});

为什么要加上 formatter 这段代码呢？原因是因为 Northwind 数据库中图片，前面78个字节是 OLE 相关的信息，所以将数据通过 JavaScript 的atob 解码为字符串，截取 78 个字节后面的内容，再使用 btoa 还原为 Base64 编码。

运行后，UI 显示界面如下：

很可惜，Northwind OData service 并不支持数据的写入，所以我们还需要使用 mock server 来模拟。因为近期较忙，只能抽时间写一点，下一篇再来介绍含图片的 CRUD 实现。

源代码

30_zui5_odata_image_read

0 0