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

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

这一节就来展示这种实现过程。当然，这个实现中的缩略图更新实际上是form表单编辑的一部分，本节只展示缩略图相关的部分。主要也包括Html、JS和后台实现三个部分。

html页面实现如下：

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渲染代码如下：

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服务端的程序：

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) {}就可以起作用了。

javascript 复制代码

//form.val(iform,rsdata);
let keyw_name = `#${iform} input,#${iform} select,#${iform} textarea`;
$(keyw_name).trigger('change');

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