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

本文链接：https://blog.csdn.net/stone0823/article/details/70188230

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