Layui表格与文件上传组件

表格组件

异步加载数据信息，在js中发送请求后台数据，后台响应json数据，然后前台再进行解析。其中比较重要的是json数据格式

示例

前台页面js

layui.use('table', function () {
    var table = layui.table;
    var dataTable = table.render({
        elem: '#lib'
        , url: 'queryBookList'
        , toolbar: '#toolbarDemo'
        , page: true
        , where: {'name': ''}
        , cols: [
            [
                {type: 'checkbox', align: 'center'}
                , {field: 'bookId', width: 80, title: 'ID', sort: true, align: "center"}
                , {field: 'name', width: 180, title: '图书名称', align: 'center'}
                , {field: 'author', width: 120, title: '作者', align: 'center'}
                , {field: 'introduction', width: 270, title: '介绍', align: 'center'}
                , {field: 'publish', width: 220, title: '出版社', align: 'center'}
                , {field: 'pubDate', width: 120, title: '出版日期', align: 'center'}
                , {
                templet: '<div>{
   
   {createrFormat(d.bookclass.className)}}</div>',
                width: 120,
                title: '图书分类',
                align: 'center'
            }
                , {field: 'number', width: 80, title: '数量', align: 'center'}
            ]
        ]
    });

后台响应json数据

实现效果

layui文件上传组件

在页面中添加文件上传组件，选择文件后实现异步上传，获取后台响应json数据中src，显示上传后的图片。如果是在表单上传图片，可以在表单提交时将上传后的路径保存在数据库中

html

<div class="layui-form-item">
    <label class="layui-form-label">图片：</label>
    <div class="layui-upload-drag" id="test1">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img style="max-width: 196px" alt="上传成功后渲染" src="">
        </div>
    </div>
</div>

js

layui.use('upload', function() {
    var $ = layui.jquery
        , upload = layui.upload;
    //普通图片上传
    upload.render({
        elem: '#test1'
        ,url: '/image/upload' //改成您自己的上传接口
        ,done: function(res){
            console.log(res.data.src);
            if(res.code == 0){
                layer.msg("上传成功",{icon:1})
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
            }else{
                layer.msg("上传失败",{icon:2})
            }
        }
    });
});

后端接口，上传成功后返回json数据，包括状态码、信息提示、文件上传后的地址

@PostMapping("upload")
public String upload(@RequestParam("file") MultipartFile multipartFile){
    
    
    String filePath = imageService.upload(multipartFile);
    Map<String,String> srcMap = new HashMap<>();
    srcMap.put("src",filePath);
    return JsonUtil.buildImageJsonData(0,"上传成功",srcMap);
}

示例