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="" 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>