Layui附件上传

最新推荐文章于 2024-05-27 17:05:30 发布

会飞的鱼@

最新推荐文章于 2024-05-27 17:05:30 发布

阅读量2.1k

点赞数

分类专栏： JavaScript WEB

本文链接：https://blog.csdn.net/wenming111/article/details/108849093

版权

WEB 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 1 订阅

订阅专栏

本文介绍了一种使用layui前端框架和SpringBoot后端实现文件上传的方法。前端通过layui模板引擎设置上传按钮，并绑定上传事件，后端通过SpringBoot接收并处理上传的文件。关键代码包括layui表格渲染、上传配置以及后端接口定义。

摘要由CSDN通过智能技术生成

附件上传

附件上传：
前端使用layui框架
后端使用SpringBoot

1、前端：Layui

官网传送门

2、绑定事件

HTML:

1） layui 模板引擎设置附件上传按钮

    <script type="text/html" id="dataDemo">
        <a class="layui-btn layui-btn-xs" lay-event="uploadFile" id="upload{{d.index}}">上传</a>
    </script>

2）附件表单：

    <div style="width: 100%;height: 500px;">
        <table id="applyTable" lay-filter="applyTable" lay-size="sm"></table>
    </div>

3）表单渲染：

        layui.table.render({
            elem: '#applyTable',
            even: true,
            cols: [[
                {title: "序号", type: 'numbers', align: "center", width: 60},
                {field: "name", title: "名称", align: "center"},
                {field: "format", title: "格式", align: "center", width: 100},
                {field: "", title: "操作", align: "center", toolbar: "#dataDemo", width: 120}
            ]],
            //表单展示数据
            data: [{
                "name": "Layui前端应用"
                , "format": "pdf"
                ,"index": 1
            }, {
                "name": "springboot菜鸟教程"
                , "format": "pdf"
                ,"index": 2
            }, {
                "name": "SQL数据库入门"
                , "format": "pdf"
                ,"index": 3
            }
            done: function () {
                // 上传按钮绑定事件
                var num= 3;
                for (var i = 1; i <= num; i++) {
                    //初始化 渲染上传按钮事件（核心代码）
                    uploadIns("#upload" + i);
                }
            }
        });
        layui.table.on('tool(applyTable)', function (obj) {
            var datas = obj.data;
            var layEvent = obj.event;
            if (layEvent == 'preview') {
                //预览
            } else if (layEvent == 'uploadFile') {
                //上传
                that.fileName= datas[1];
            }
        });

绑定事件：
js：

function uploadIns(elem) {
    layui.upload.render({
        elem: elem //绑定元素
        , url: app.config.serverUrl + 'serverUpload/uploadFile'
        , method: 'post'
        , accept: 'file'
        , multiple: true
        , auto: false
        , bindAction: elem
        , choose: function (obj) {
            //模拟点击
            $(elem).trigger("click");
        },
        before: function () {
            //后端参数
            this.data = {
                "id": id,
                "fileName": fileName
            }
        }
        , done: function (res) {
            layer.msg('上传成功');
        }
    });
}

注：app.config.serverUrl：为服务地址（localhost:8080）

3、后端: SpringBoot

官网传送门

4、java:

post请求：

    @RequestMapping("/uploadFile")
    @ResponseBody
    public boolean uploadFile(@RequestParam MultipartFile file, HttpServletRequest  data) {
		//前端参数接收
		String pipeproid = data.getParameter("id").toString();
		//业务逻辑。。。。。
        return true;
}