SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)

本文主要是介绍SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

数据库中对图片的保存可以采取二进制格式，也就是我们平常所说的 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 datavar 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;}}
});