LayUI实现 文件的多个上传以及回显

LayUI实现 文件的多个上传以及回显

首先 需要创建 两个表格
一个主表 一个存储文件的表，文件的表需要设置一个外键id，来存储主表对应的主键，形成一个主表信息对应多个文件的效果。

            <label class="layui-form-label">附件上传：</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="upload" style="background-color: #009688">
                    <i class="iconfont">&#xe7eb;</i>选择文件
                </button>
            </div>
        </div>
	  <label class="layui-form-label"></label>
            <div class="layui-input-block" id="fileList">
                <#list limsBReportArchived.reportArchivedFiles as reportArchivedFile>
                    <div style="margin:2px 0px">
                        <input type="hidden"  name="file_path"  value="${reportArchivedFile.filePath!}">
                        <input type="hidden"  name="file_name"  value="${reportArchivedFile.originalFileName!}">
                        <a href="javascript:download('${reportArchivedFile.filePath!}')">${reportArchivedFile.originalFileName!}</a>&nbsp;&nbsp;
                        <a onclick='del(this);' title="删除">
                            <i class="iconfont" style="font-size: 25px;color: #ef4836;vertical-align: middle;cursor:pointer;">&#xe6a3;</i>
                        </a>
                    </div>
                </#list>
            </div>

1. 第一步

       定义一个  upload
         var upload = layui.upload;
   

第二步
调用此方法
var uploadInst = upload.render
var uploadInst = upload.render({
elem: ‘#upload’ //绑定元素
,url: ‘/repo/reportArchived/upload?id=’+uploadId //上传接口
,method: ‘POST’
,accept: ‘file’
,multiple: true
,before: function(obj){
layer.load();
}
,done: function(res){//上传完毕回调

        }
        ,error: function(){//请求异常回调
            layer.closeAll('loading');
            layer.msg('网络异常，请稍后重试！');
        }
    });

标签：function,文件,layer,回显,LayUI,upload,主表,上传
来源： https://blog.csdn.net/weixin_42268839/article/details/120441224