前后端耦合下实现多文件上传和下拉树选择

环境

• 后端框架：SpringBoot
• 模板引擎：FreeMarker
• 前端框架：JQuery
• 前端 UI 组件：Layui、xm-select

前端代码

表单部分

• 使用 Layui 表单样式。
• 编写一个下拉树的分隔区块。
• 编写一个上传按钮和上传成功后显示文件名和操作的表格。

<form class="layui-form" lay-filter="add" style="height:100%; padding-top:16px;">
    <div class="layui-form-item">
        <label class="layui-form-label">下拉树：<span style="color:red">*</span></label>
        <div class="layui-input-block" id="selectTree"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">附件：</label>
        <input type="hidden" name="attachment" id="attachment" value="${demo.attachment!}"/>
        <div class="layui-input-block layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">上传文件</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" class="btn layer-cancel">取消</button>
        <button lay-submit class="btn btn-primary" lay-filter="add" id="submitAddForm">完成</button>
        <button type="reset" class="btn btn-warm" id="resetAddForm">重置</button>
    </div>
</form>

JS 部分

• 使用 layui.upload 上传组件，上传成功后 js 动态拼接表格元素显示文件名和监听删除操作。
• 使用 xm-select 多选组件，初始化使用 ajax 请求接口返回树形数据，然后动态赋值给下拉框。

$(function () {
    var uploadListIns = layui.upload.render({
        elem: '#testList'
        ,elemList: $('#demoList')
        ,url: '${request.contextPath}/file/upload'
        ,accept: 'file'
        ,multiple: true
        ,number: 10
        ,auto: true
        ,done: function(res, index, upload){ //成功的回调
            var attachment = $("#attachment").val();
            var attachmentArray = attachment ? attachment.split(",") : [];
            attachmentArray.push(res.uuid)
            $("#attachment").val(attachmentArray.join(","))
            appendTr(res.uuid, res.fileName, res.fileId);
            return;
        }
        ,error: function(){
        }
    });

    <#list files as file>
        appendTr('${file.uuid}', '${file.fileName}', '${file.fileId}')
    </#list>

    function appendTr(uuid, fileName, fileId) {
        let downloadUrl = '${request.contextPath}/file/download?fileId=' + fileId
        var tr = $(['<tr id="'+ uuid +'">'
                    ,'<td>'+ '<a href="' + downloadUrl + '" style="color:blue; text-decoration:underline;">' + fileName + '</a>' 						+'</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));

        tr.find('.demo-delete').on('click', function(){
            // Ajax 模拟 Form 表单提交
            var formData = new FormData();
            formData.append("uuid", tr.attr('id'));
            $.ajax({
                type: "post",
                async: false,
                url: '${request.contextPath}/file/remove',
                dataType: "json",
                data: formData,
                contentType: false,//这里
                processData: false,//这两个一定设置为false
                success: function (res) {
                    Array.prototype.removeByValue = function (val) {
                        for (var i = 0; i < this.length; i++) {
                            if (this[i] === val) {
                                this.splice(i, 1);
                                i--;
                            }
                        }
                        return this;
                    }
                    var attachment = $("#attachment").val();
                    var attachmentArray = attachment ? attachment.split(",") : [];
                    attachmentArray.removeByValue(tr.attr('id'));
                    $("#attachment").val(attachmentArray.join(","))
                },
                error: function (err) {
                    console.log(err)
                }
            });
            tr.remove();
        });

        $('#demoList').append(tr);
    }
    
    var selectTreeXmSelect = layui.xmSelect.render({
        el: '#selectTree',
        autoRow: true,
        name: "selectTree",
        //单选模式
        radio: true,
        height: 'auto',
        data: []
    })
    
    $.ajax({
        type: "get",
        async: false,
        url: Ams.ctxPath + "/demo/demo/selectTree",
        dataType: "json",
        data: {},
        contentType: "application/json;charset=UTF-8",
        success: function(res) {
            selectTreeXmSelect.update({
                data: res,
                tree: {
                    show: true,
                    //非严格模式
                    strict: false,
                    //展开所有节点
                    expandedKeys: true,
                },
            })
            selectTreeXmSelect.setValue(['${demo.selectTree!}'])
        },
        error: function(err) {
            console.log(err)
        }
    })
});

后端代码

控制器

• 页面跳转和获取下拉树数据的接口。

/**
 * 跳转页面
 *
 */
@RequestMapping(value = "/editDemo", method = RequestMethod.GET)
public ModelAndView editDemo(ModelAndView modelAndView, String id) {
    Demo demo = new Demo();
    if (StringUtils.isNotEmpty(id)) {
        demo = demoService.getById(id);
    }
    List<Object> files = demoService.getFiles(demo);
    modelAndView.addObject("files", files);
    modelAndView.addObject("demo", demo);
    modelAndView.setViewName("/demo/demoEdit");
    return modelAndView;
}

/**
 * 下拉树
 *
 */
@RequestMapping(value = "/selectTree", method = RequestMethod.GET)
public List<Object> selectTree() {
    return demoService.selectTree();
}

Service

• 构造树形数据以及查询文件信息。
• 文件上传、删除、下载相关操作的接口，单独抽出一个模块来实现，实现方式有很多种，例如可存储到本地，也可以存储到 MongoDB 等，具体实现以后单独写篇文章。

@Override
public List<Object> selectTree() {
    List<SelectTree> selectTree = selectTreeService.list();
    return menuList(selectTree);
}

/**
 * Menu list list.
 *
 * @param menu the menu
 * @return the list
 */
public List<Object> menuList(List<SelectTree> menu) {
    List<Object> list = new ArrayList<>();
    for (SelectTree selectTree : menu) {
        Map<String, Object> map = new LinkedHashMap<>();
        if (selectTree.getParentId() == null) {
            menuItem(menu, list, selectTree, map);
        }
    }
    return list;
}

/**
 * Menu child list.
 *
 * @param menu the menu
 * @param id   the id
 * @return the list
 */
public List<Object> menuChild(List<SelectTree> menu, String id) {
    List<Object> list = new ArrayList<>();
    for (SelectTree selectTree : menu) {
        Map<String, Object> map = new LinkedHashMap<>();
        if (selectTree.getParentId() != null && selectTree.getParentId().equals(id)) {
            menuItem(menu, list, selectTree, map);
        }
    }
    return list;
}

private void menuItem(
        List<SelectTree> menu,
        List<Object> list,
        SelectTree selectTree,
        Map<String, Object> map
) {
    map.put("value", selectTree.getUuid());
    map.put("name", selectTree.getPointName());
    map.put("pid", selectTree.getParentId());
    List<Object> children = menuChild(menu, selectTree.getUuid());
    map.put("children", children);
    list.add(map);
}

@Override
public List<Object> getFiles(Demo demo) {
    String attachment = demo.getAttachment();
    if (StringUtils.isEmpty(attachment)) {
        return new ArrayList<>();
    }
    String[] attachmentArray = attachment.split(",");
    StringBuilder in = new StringBuilder();
    for (String s : attachmentArray) {
        if (in.length() == 0) {
            in.append("'").append(s).append("'");
        }
        in.append(",'").append(s).append("'");
    }
    return demoDao.getNativeQueryList(filesSql(in.toString()));
}

public String filesSql(String in) {
    return "SELECT\n" +
            "\tuuid,\n" +
            "\tfile_name,\n" +
            "\tfile_id \n" +
            "FROM\n" +
            "\tFILE \n" +
            "WHERE\n" +
            "\tuuid IN (" + in + ")";
}