万花筒の图片服务
最后更新于：2022-04-01 23:46:43
几乎所有的开发者都做过图片上传，这个功能几乎应用于所有的系统。但是大部分人都是用别人封装好的，图片上传工具类或者上传服务，自己没有深入研究过具体实现。
目前常见的图片服务方案：
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可能略有区别!!
~~~
~~~
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 '
';
}
return value;
}
~~~
> **config的配置别忘了！！！**
其中IMG是JS全局变量，写在V1.6中的 inclue.html中
~~~
~~~
其中${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 sharedVars = new HashMap();
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);
~~~
如果你还是一脸懵逼，没事，后续的版本中会集成云上传，你不用关心实现过程了，请期待！
';
';
}
return value;
}
~~~
> **config的配置别忘了！！！**
其中IMG是JS全局变量，写在V1.6中的 inclue.html中
~~~
~~~
其中${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