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 的完整代码：

对代码，解释两个部分：

• 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