几乎所有的开发者都做过图片上传,这个功能几乎应用于所有的系统。但是大部分人都是用别人封装好的,图片上传工具类或者上传服务,自己没有深入研究过具体实现。

目前常见的图片服务方案:

1.上传到云盘中,如:7牛,阿里OSS… 需要按照服务提供方提供的API定制化开发上传功能,然后通过网络URL访问,网络文件服务需要付费。

2.直接上传到当前项目的webapp下的某目录(EovaV1.5之前就是这样实现的) 项目重新部署,需要备份图片,否则就会被自动清理。部署完项目,图片就访问不到了。

3.上传到本机的指定目录中,并将该目录发布为静态服务器(EovaV1.5的实现方式) 需要部署两个服务,一个Web服务器,一个静态服务器,直接访问静态服务器获取图片。

本方案是很多企业采用的方案,有两个好处:

重启部署之后,图片不会被清除 动静分离,减轻Web服务压力

下面我们先看一下如何用Tomcat发布静态服务:

  1. 下载Tomcat
  2. 修改Tomcat /conf/server.xml 在Host节点中加入Context,参考下面 基于apache-tomcat-7.0.69-windows-x64测试,配置如下,切记,不同版本的Tomcat可能略有区别!!
       <Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
         <Context path="" docBase="D:/static" reloadable="true" />
       </Host>
    
  3. 启动图片服务器,假设HTTP端口号为18080

Eova图片服务配置:

#图片服务域名(上面搭建的静态服务器的IP+端口)
domain_img = http://127.0.0.1:18080

#静态根目录(上面搭建的静态服务器docBase对应的目录)
static_root = D:/eova/static

首先将元字段设置为图片框 然后元字段文件目录配置:需要手工修改数据库中的JSON配置(表:eova_field 字段:config)

    // 文件保存目录
    private String filedir;
    // 固定文件名(会自动覆盖同名文件)
    private String filename;
    // 备注
    private String memo;
    // 图片宽度(多图)
    private String width;
    // 图片高度(多图)
    private String height;

用户头像配置举例: 上传到 根目录/company 固定文件名 {"filedir":"/company","filename":"企业营业执照.jpg","memo":"请选择图片上传,支持格式:.png/.jpg/.bmp"} So,经过如上配置,是为了下面两项

图片上传保存目录:(假设传的图片名为001.jpg)

D:/eova/static/某某业务/001.jpg

图片服务实际访问URL:

http://127.0.0.1:18080/某某业务/001.jpg


项目实战(上面的解说是V1.5之前提供的,有很多小白玩家还是各种懵逼,所以下面手把手教你,如果还....)

实际的Grid效果是:

PS:已知EasyUIGrid有一个BUG,当单元格内图片过高,会导致Grid显示错乱(建议控制高度在50px内) 解决方案推荐: 1.如果想在列表查看大图,可以格式化成鼠标移入放大显示 2.自定义列表页

图片为什么能显示?

谁提供的图片服务? http://127.0.0.1:10086/avatar/1475647089038.jpg 本地启动了一个端口号为 10086的 tomcat来提供图片服务

是咋配置的呢?

function(value, row, index, field) {
    if (value) {
        return '<img src="' + IMG + '/avatar/' + value + '" height=25>';
    }
    return value;
}

config的配置别忘了!!!

其中IMG是JS全局变量,写在V1.6中的 inclue.html中

<script>
// 全局JS常量配置
var IMG = "${IMG!}";
var FILE = "${FILE!}";
</script>

其中${IMG}来自于配置的全局变量:

// 设置全局变量
final String STATIC = props.get("domain_static");
final String CDN = props.get("domain_cdn");
final String IMG = props.get("domain_img");
final String FILE = props.get("domain_file");

Map<String, Object> sharedVars = new HashMap<String, Object>();
if (!xx.isEmpty(STATIC))
sharedVars.put("STATIC", STATIC);
else
sharedVars.put("STATIC", "");
if (!xx.isEmpty(CDN))
sharedVars.put("CDN", CDN);
if (!xx.isEmpty(IMG))
sharedVars.put("IMG", IMG);
if (!xx.isEmpty(FILE))
sharedVars.put("FILE", FILE);

// Load Template Const
PageConst.init(sharedVars);

BeetlRenderFactory.groupTemplate.setSharedVars(sharedVars);

如果你还是一脸懵逼,没事,后续的版本中会集成云上传,你不用关心实现过程了,请期待!

© 2019 EOVA.CN all right reserved,powered by Gitbook本文档更新于: 2019-07-22 12:40

results matching ""

    No results matching ""