Layui文件上传（Excel转表格）

经过两天的摸索，始终没有找到合适方法，解决上传的问题，最后在大佬的指导下完成（非常感谢）

首先下载官方扩展插件，在layui-excel/layui_exts/里面的excel.js和excel.min.js两个文件

https://fly.layui.com/extend/excel/

其次在HTML界面引入js文件，layui_exts文件夹在webapp直接目录下

<script type="text/javascript">
    layui.config({
        base: '/layui_exts/'
    }).extend({
        excel: 'excel'
    });
</script>

按钮代码

 <button class="layui-btn layui-btn-sm" style="background-color: #10A9FF;" id="importExcel">
            <i class="layui-icon"></i>上传文件
 </button>

然后进行上传操作

<script>
    layui.use(['table','jquery','layer','upload','excel'],function () {
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , upload = layui.upload
            , excel = layui.excel
        ;

        //upload上传实例
        var uploadInst = upload.render({
            elem: '#importExcel' //绑定元素
            , url: '/upload/' //上传接口（PS:这里不用传递整个 excel）
            , auto: false //选择文件后不自动上传
            , accept: 'file'
            , choose: function (obj) {// 选择文件回调
                //console.debug(obj)
                var files = obj.pushFile()
                var fileArr = Object.values(files)// 注意这里的数据需要是数组，所以需要转换一下
                //console.debug(fileArr)
                // 用完就清理掉，避免多次选中相同文件时出现问题
                for (var index in files) {
                    if (files.hasOwnProperty(index)) {
                        delete files[index]
                    }
                }
                uploadExcel(fileArr) // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])
            }
        })
        /**
         * 上传excel的处理函数，传入文件对象数组
         * @param  {[type]} files [description]
         * @return {[type]}       [description]
         */
        function uploadExcel(files) {
            try {
                excel.importExcel(files, {
                    // 读取数据的同时梳理数据
                    fields: {
                    'vmNo': 'A'
                    ,'vmAL': 'B'
                    ,'vmName': 'C'
                    ,'vmExp': 'D'
                    ,'vmStartDate': 'E'
                    ,'vmEndDate': 'F'
                    ,'vmNum': 'G'
                    ,'vmPer': 'H'
                    }
                }, function (data) {
                    // console.debug(data);
                    $.each(data, function (index, obj) {
                        // console.debug(obj)
                        // console.debug(obj.Sheet1)
                        $.each(obj.Sheet1, function (index, object){
                            console.log(object);
                            var vmNo=object.vmNo;
                            var vmAL=object.vmAL;
                            var vmName=object.vmName;
                            var vmExp=object.vmExp;
                            var vmStartDate=object.vmStartDate;
                            var vmEndDate=object.vmEndDate;
                            var vmNum=object.vmNum;
                            var vmPer=object.vmPer;
                            console.log(object.vmEndDate);

                            if(vmNo=="编号"){

                            }else {
                                $.ajax({
                                    // async: false,
                                    url: 'addVM',//产品型号下拉框
                                    type: 'post',
                                    // dataType: "json",
                                    // contentType: "application/json",
                                    data: {
                                        vmNo: vmNo,
                                        vmAL: vmAL,
                                        vmName: vmName,
                                        vmExp: vmExp,
                                        vmStartDate: vmStartDate,
                                        vmEndDate: vmEndDate,
                                        vmNum: vmNum,
                                        vmPer: vmPer
                                    },
                                    success: function (data) {
                                        layer.msg('上传成功');
                                        table.reload('test',{
                                            url:"findAllVM"
                                        })
                                    },
                                    error: function (msg) {
                                        layer.msg('请联系管理员!!!');
                                    }
                                });
                            }
                        })
                    });

                    // 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
                    /*layer.open({
                        title: '文件转换结果'
                        , area: ['800px', '400px']
                        , offset: ['100px', '100px']
                        , tipsMore: true
                        , content: laytpl($('#LAY-excel-export-ans').html()).render({data: data, files: files})
                        , success: function () {
                            // element.render('tab')
                            code({})
                        }
                    })*/
                })
            } catch (e) {
                layer.alert(e.message)
            }
        }
    });
</script>

如果需要先对数据进行检验，可以把弹出层的代码解开并加上相关的代码，如下

<script type="text/html" id="LAY-excel-export-ans">
    {{# layui.each(d.data, function(file_index, item){ }}
    <blockquote class="layui-elem-quote">{{d.files[file_index].name}}</blockquote>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            {{# layui.each(item, function(sheet_name, content) { }}
            <li>{{sheet_name}}</li>
            {{# }); }}
        </ul>
        <div class="layui-tab-content">
            {{# layui.each(item, function(sheet_name, content) { }}
            <div class="layui-tab-item">
                <table class="layui-table">
                    {{# layui.each(content, function(row_index, value) { }}
                    {{# var col_index = 0 }}
                    <tr>
                        {{# layui.each(value, function(col_key, val) { }}
                        <td id="table-export-{{file_index}}-{{sheet_name}}-{{row_index}}-{{col_index++}}">{{val}}</td>
                        {{# });}}
                    </tr>
                    {{# });}}
                </table>
                <pre class="layui-code">{{JSON.stringify(content, null, 2)}}</pre>
            </div>
            {{# }); }}
        </div>
    </div>
    {{# }) }}
</script>