# 文件上传组件

# 概述

项目开发中我们经常会使用到上传图片、上传文件的功能,上传文件功能由:表单元素CSS样式JS交互表单提交等一系列操作和元素组成,如果都放入表单元素中显得代码复杂和代码冗余,同时维护成本也比较高,只有一个文件上传勉强可以接收,如果一个表单中有N个上传文件的功能,单单一个上传文件的功能估计都写的够呛,更别说其他的表单元素处理了,从代码的简洁性、可维护性角度出发,我们自定义开发了一套上传文件的组件,本着开箱即用的原则,要求组件具备:可插拔式灵活性可维护性高效性等等,在需要实现文件上传的地方只需要简单的引入组件即可,无法再写那么多冗余而又费时费力的代码,根据项目的实际要求和经验,我们开发了一套灵活多年的系统框架组件:文件上传组件,上一章节《图片上传组件》我们详细的说明了图片上传的方式和原理,本章节我们将详细的说明文件上传组件的方式和原理;

# 文件上传

文件上传组件是框架中开发的另一套独立组件,专门上传除图片意外的其他文件格式的组件,如xls,xlsx,doc,docx等等一系列文件,支持上传单个文件个多个文件,同时参数配置说明即可。

  • 组件:<widget:uploadFile name="file|附件|product|5|xls,xlsx,doc,docx|10*1024" th:value="${info['fileName']}" />

  • 参数:name:file|附件|product|1|xls,xlsx,doc,docx|10*1024

`file`:组件名称,此字段对应数据表中的字段名称`image`;
`附件`:这个文字是动态指定上传按钮的名称,组件会自动解析为`上传附件`;
`product`:自定义上传目录,product参数表示此文件上传到指定目录下的`product`目录;
`5`:这个参数表示组件最多可以上传多个文件;
`xls,xlsx,doc,docx`:表示上传文件组件允许上传的文件格式,`如果上传格式不写,组件会默认调用全局文件上传格式进行验证`;
`10*1024`:表示最大允许上传的单文件大小;
1
2
3
4
5
6
  • 组件使用

上传文件组件的使用也非常简单,与单图、多图组件的引入无异,直接一行代码引入即可,其他复杂的逻辑和业务处理全部交给组件自身去解决。

<form class="layui-form model-form" action="" style="width:80%;">
    <div class="layui-form-item">
        <label class="layui-form-label">附件:</label>
        <div class="layui-input-block">
            <widget:uploadFile name="file|附件|product|5|xls,xlsx,doc,docx|10*1024" th:value="${info['fileName']}" />
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure