Flask+LayUI开发手记（八）：通用封面缩略图上传实现

       前一节做了头像上传的程序，应该说，这个程序编写和操作都相当繁琐，实际上，头像这种缩略图在很多功能中都会用到，屏幕界面有限，绝不会给那么大空间摆开那么大一个界面，更可能的处理，就是显示一个缩略图，然后点击图像，即弹出文件选择框，选择文件后，直接上传，并且将当前缩略图改为选后的图像。

        这一节就来展示这种实现过程。当然，这个实现中的缩略图更新实际上是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 ImageSRVDATA_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.filenameextname = sour_file_name.split('.')[1]dest_filename = 'thumb_' + str(time.time()) +  '.' + extnamesave_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');

        最后还是展示一下界面效果图：