X5 使用 blobImage组件上传图片，通过UI2 使用BIZData,Baas 两种显示图片

用户想查看通知公告，同时通知公告是以列表详细展示，列表界面带有用户自定义上传的图标。在此处，由于使用的场景不同。前端UI2 使用两种方式展示，BizData和Baas。

1 内网系统存在只有系统内的用户可以查看的数据，此时用户必须登录之后才能查看，使用BizData

2 还有一种业务场景，信息是发布到公网，不需要登录，公众用户可以直接查看，此时不需要用户登录。使用Baas

那么信息维护的界面是系统管理员维护，使用统一的维护界面。维护界面是需要登录系统的所以直接使用UI2 的BizData 做的，同时组件blobImage 只支持BizData

X5 中维护的界面如下。

X5 前端UI2 支持使用BizData，Baas ，cdata(不描述)

需要登录的页面UI2 的展示效果：

公众页面，不需要登录的页面UI2 的展示效果。实际上使用Baas做页面展示，图片显示的时候需要使用BaasService获取Blob字段返回InputStream来显示。

其实从界面展示的实际效果来看根本就没有设么区别，都是列表显示，列表前面带有自定义图标。

那么下面重点贴出对于blobImage 组件上传图片存在数据库表中的一个blob类型的字段中。

在X5 中blbo类型字段的值需要自己实现获取字段

那么在需要登录的界面如何获取blob字段，并且通过image展示出来呢？

主要使用了list组件做列表，那么blob在image中显示使用的代码如下

<div component="$UI/system/components/justep/list/list" class="x-list"

data="applicationResult" limit="-1" xid="list1" style="overflow: auto;height:calc(100% - 150px);">

</div>

<div component="$UI/system/components/bootstrap/row/row" class="row"

xid="row1">

</div>

</div>

</div>

</div>

<div component="$UI/system/components/justep/button/buttonGroup"

class="btn-group" tabbed="true" xid="buttonGroup4" style="width:72px;">

<a component="$UI/system/components/justep/button/button"

class="btn btn-link" label="测试" xid="button3" onClick="testBtnClick"

style="display:inline-block;" icon="dataControl dataControl-format">

</a>

</div>

</li>

</ul>

</div>

2 setImg 方法代码如下：

Model.prototype.setImg = function(row, element) {

var loginDate = new Date();

var fid = row.val("fServiceID");

var imageAvatar = getImageAvatar(fid, loginDate.getTime());

$(element).one('error', function() {

$(this).attr('src', defaultAvatar);

});

return imageAvatar;

};

```

getImageAvatar 方法如下

```var getImageAvatar = function(personID, lastModified) {

var params = {

process : '/natures/service/process/serviceBrowsing/serviceBrowsingProcess',

activity : 'mainActivity',

action : 'blobDownloadAction',

blobDataModel : '/natures/service/data', //要查询的blob字段所在的data

blobConcept : 'NA_ServiceRegister', //要查询的blob字段对应的概念名称

blobRelation : 'fServiceImage',//要查询的blob字段对应的字段名称

blobConceptValue : personID,//对应的blob所在的概念的主键的取值的字段。其实可以理解成 where条件后面的值。

$lastModified : lastModified

};

var url = new justep.URL(require.toUrl("$UI/system/components/justep/blob/server/download.j"));

//$UI/system/components/justep/blob/server/download.j 系统字段的

url.setParam(params);

return url.toString();

};

blobDownloadAction 这个是系统自带的action 返回InputStream

public static InputStream query(String blobDataModel, String blobConcept, String blobRelation, String blobConceptValue) throws Exception {

return BlobUtils.query(blobDataModel, blobConcept, blobRelation, blobConceptValue);

}

在不能直接调用Action，不需要登录的界面要显示带blob 的列表。此时我们需要自己动手写service。然后前端调用baasService

使用baas data 做的带显示blob的list 上面的差不多，代码如下

<ul component="$UI/system/components/justep/list/list" class="x-list x-list-template bdc-news-list"

xid="list3" data="tzggList">

bind-attr-src="$model.setImg($object, $element)" alt="" xid="showImage" class="img-rounded"

</div>

</div>

</li>

</ul>

setImg 方法如下

Model.prototype.setImg = function(row, element) {

var loginDate = new Date();

var fid = row.getID();

var imageAvatar = this.getImageAvatar(fid);

return imageAvatar;

};

getImageAvatar 方法如下：

Model.prototype.getImageAvatar = function(FID) {

var self=this;

debugger;

var showImage = this.getElementByXid("showImage");

var url = window.location.origin+require.toUrl("/baas/taszrzy/tzgg/getBlobColumn?FID=" + FID);

return url;

};

其中 getBlobColumn 是自己定义的一个baasService 如下

package taszrzy;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.sql.Blob;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import javax.naming.NamingException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;

import com.justep.baas.Utils;

import com.justep.baas.action.ActionContext;

public class Tzgg {

public static JSONObject getBlobColumn(JSONObject params, ActionContext context) throws Exception,ServletException, IOException {

HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);

HttpServletResponse response = (HttpServletResponse)context.get(ActionContext.RESPONSE);

if(request.getMethod().equals("GET")){

doGet(request, response,params, context);

}

return null;

}

/**

get为获取文件浏览或者下载

* @throws NamingException

* @throws SQLException

**/

private static void doGet(HttpServletRequest request, HttpServletResponse response,JSONObject params,ActionContext context)

throws ServletException, IOException, SQLException, NamingException {

getFile(request,response,params, context);

}

private static final int BUFFER_SIZE = 32768 * 8;

private static void getFile(HttpServletRequest request,

HttpServletResponse response,JSONObject params,ActionContext context) throws IOException, SQLException, NamingException {

String FID = request.getParameter("FID");

InputStream fis = getFListImage( FID,context);

response.setHeader("Cache-Control", "pre-check=0, post-check=0, max-age=0");

String fileNameKey = "filename";

String realFileName="列表.png";

response.addHeader("Content-Disposition", "inline; "+fileNameKey+"=\"" + realFileName + "\"");

OutputStream os = response.getOutputStream();

byte[] buffer = new byte[BUFFER_SIZE];

try {

if(null!=fis){

int read;

while ((read = fis.read(buffer)) != -1) {

os.write(buffer, 0, read);

}

} finally {

if(null!=fis){

fis.close();

}

// 通过条件查询blob字段的值

private static InputStream getFListImage(String FID, ActionContext context)throws SQLException, NamingException {

String str = "SELECT FLISTIMAGE FROM WW_INFOPUBLICITY WHERE FID='"+FID+"'";

Connection connection = null;

Statement statement = null;

try {

connection = context.getConnection("system");

statement = connection.createStatement();

ResultSet resultSet = statement.executeQuery(str);

if(resultSet.next()){

Blob blob=resultSet.getBlob("FLISTIMAGE");

if (Utils.isNotNull(blob)) return blob.getBinaryStream();

}

return null;

} finally {

try {

if (statement != null)

statement.close();

} catch (Exception exception) {

}

try {

if (connection != null)

connection.close();

} catch (Exception exception) {

}

X5 使用 blobImage组件上传图片，通过UI2 使用BIZData,Baas 两种显示图片

推荐阅读更多精彩内容