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>