前一节做了头像上传的程序，应该说，这个程序编写和操作都相当繁琐，实际上，头像这种缩略图在很多功能中都会用到，屏幕界面有限，绝不会给那么大空间摆开那么大一个界面，更可能的处理，就是显示一个缩略图，然后点击图像，即弹出文件选择框，选择文件后，直接上传，并且将当前缩略图改为选后的图像。
这一节就来展示这种实现过程。当然，这个实现中的缩略图更新实际上是form表单编辑的一部分，本节只展示缩略图相关的部分。主要也包括Html、JS和后台实现三个部分。
html页面实现如下：
<form class="layui-form" id="tbedit-form" lay-filter="tbedit-form" action="" tbd-operate="list" style="width:98%;display:none">
<div class="layui-form-item">
<label class="layui-form-label">文章封面</label>
<div class="layui-input-block">
<input type="text" class="layui-input layui-hide" id="upload" name="picture" opt-type="thumb" url-upload="/srv_thumbnail/article/" value="" />
<img id="upload-thumb" src="/static/images/article.png" onerror="this.src='/static/images/article.png'" title="点击图片更换封面" width="100px" height="100px">
</div>
</div>
</form>
在这个表单输入条目里，包括两个域，一个是input域，用于存储缩略图的文件路径，这个域是hide的，在界面上不会展示出来。新增记录时为空，编辑记录时以表单初始化方式将值初始化进来。
另一个域是缩略图显示域，src会随input域的值更新，从而显示出图像来。src属性设置了一个缺省图像，不过设不设都不会有用，因为表单初始化时，编辑时会更新为后台存储的缩略图文件名，在新增操作时，input域的值会置为空，此时图像域的文件名也是空，展示会出错。所以要设置上onerror属性，保证在出错时可以显示缺省的缩略图。
html的input值输入域和img图像显示域的id属性有一个隐含约定，即img图像域的id是值输入域的id加后缀‘-thumb'，同时，这两个域必须是同层兄弟节点。这样的约定最大的好处，就是在同屏可以有多个表单中拥有多个同名id的缩略图。界面显示效果如下。
增强渲染，可以做一个组件库来实现，并且通过在当前的标准输入域里配置增加属性来实现参数配置。像上面的html的input域中就多出两项属性来：opt-type="thumb" url-upload="/srv_thumbnail/article/"。这第一个opt-type就是用来配置增强组件类型为thumbnail的，第一项url-upload配置上传服务的url。
应该说，Html页面其实就是一个空架子，用于配置必要的参数。要起作用，需要通过JS渲染。在系统实现时，layui的标准表单输入域是不够的，需要做很多增强组件，比如树型编辑域、日期域、富文本编辑域还有这个缩略图，都要进行增强渲染。缩略图组件thumb的JavaScript渲染代码如下：
//对富文本编辑域进行渲染
function render_thumb(options) {
let iform = options.formId;
let keyw_name = `#${iform} input[opt-type=thumb]`;
$(keyw_name).each(function() {
elem_render_thumb($(this));
});
},
//渲染输入组件缩略图
funtion elem_render_thumb(i_elem) {
render_upload(i_elem);
function render_upload(i_elem) {
let n_elem = i_elem.attr('id');
let n_thumb = n_elem + '-thumb';
let i_thumb = i_elem.siblings('#' + n_thumb);
let url_upld = i_elem.attr('url-upload');
if (url_upld==null) {
url_upld = '/srv_thumbnail/article';
}
let uploadInst = upload.render({
elem: '#' + n_thumb,
url: url_upld,
size : 2000,
acceptMime: 'image/*',
before: function(obj){
obj.preview(function(index, file, result){
i_thumb.attr('src', result); // 图片链接（base64）
});
layer.msg('上传中', {icon: 16, time: 0});
},
done: function(rs){
if(rs.success == 0){
return layer.msg(rs.msg);
}
layer.msg(rs.msg);
let src_file = rs.thumbfile + '?time=' + new Date().getTime();
i_thumb.attr('src',src_file);
i_elem.val(rs.thumbfile);
},
error: function(){
layer.msg("上传失败");
}
});
i_elem.on('change',function(e) {
let img_file = i_elem.val() + '?time=' + new Date().getTime();
i_thumb.attr('src',img_file);
});
}
}
第一段程序render_thumb是form级的，查找到指定form里所有拥有属性opt-type="thumb"的元素，然后逐个对其进行渲染，渲染元素的函数为elem_render_thumb。这段程序为了展示方便进行了修改，实际的组件库是采用layui.define方式定义的，分为在form和elem两个库中。
文件上传采用layui上传组件upload，将其与缩略图展示域绑定，点击图片自然就弹 出选择窗开始执行了。与上一节不同的是，这次的设置是选择文件后自动上传，而不是分两阶段提交，也没有进度条效果，失败后不再支持重传（这些复杂的实现其实没必要）。
然后，是python服务端的程序：
import logging,json,time
from PIL import Image
SRVDATA_UPLOAD = 'srvdata/uploads/'
# srvdata缩略图上传服务
@app.route('/srv_thumbnail/<path:filepath>',methods=['POST'])
def srvdata_thumbnail(filepath):
logging.debug('POST thumbnail srvdata....')
if request.method == 'POST':
avt = request.files.get('file')
sour_file_name = avt.filename
extname = sour_file_name.split('.')[1]
dest_filename = 'thumb_' + str(time.time()) + '.' + extname
save_path = SRVDATA_UPLOAD + filepath + dest_filename
#avt.save(save_path)
img = Image.open(avt)
rimg = img.resize((128,128))
rimg.save(save_path)
rs_data = {
'success':1,
'msg':'更新文章缩略图成功',
'thumbfile': '/' + save_path,
'code':0
}
return json.dumps(rs_data)服务端程序的主体流程就是上传文件并且将其缩小为128*128的缩略图文件并且存储。要注意在路由定义时，在路由定义后跟了文件存储的路径名。这个路由是在前端html的url-upload中定义的"/srv_thumbnail/article/"，也就是说文件存储的路径为'/srvdata/uploads/article/’下。这样，一个可以在各处中使用的缩略图上传组件就完成了。
最后，强调一下，要保证文件名输入域的值和缩略图的src联动，那么在更改值时，就必须手动触发。由于表单初始化值都是统一的，并不会单独就某个域初始化。所以，初始化值后，需要加上如下代码（新增清空时也要加），这样处理后，上面缩略图渲染程序中的i_elem.on('change',function(e) {}就可以起作用了。
//form.val(iform,rsdata);
let keyw_name = `#${iform} input,#${iform} select,#${iform} textarea`;
$(keyw_name).trigger('change');最后还是展示一下界面效果图：
