如何通过lay-excel上传excel xlsx和xls文件前预览excel数据，及预览后通过php后台写入数据库？

Question

如下实现了在用户点击或拖拽excel到上传窗口后，在layer.open弹窗中预览excel表格中每个sheet的内容。
如何修改实现在预览窗点击确定上传后将excel数据通过后台php接口写入mysql数据库？目前下述确认按钮和取消按钮及关闭按钮都无效。

 <script>
        layui.config({
            base: '../module/soulTable/ext/',
            version: 'v1.8.0'
        }).extend({
            soulTable: 'soulTable'
        });
        layui.use(['table', 'dropdown', 'soulTable'], function () {
            var table = layui.table;
            var soulTable = layui.soulTable;
            var form = layui.form;
            var dropdown = layui.dropdown;
            var upload = layui.upload;
            var excel = layui.excel;
            var laytpl = layui.laytpl;
            var $ = layui.$;

 function openSmtbomUpload() {
                layer.open({
                    type: 1,
                    title: '上传窗口',
                    content:
                    `<div class="layui-upload-drag" style="display: block;" id="LAY-excel-upload">
                        <i class="layui-icon layui-icon-upload"></i>
                        <div>点击上传，或将文件拖拽到此处</div>
                        <div class="layui-hide" id="ID-upload-demo-preview"><hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                        </div>
                    </div>
                    `,
                })
                var uploadInst = upload.render({
                    elem: '#LAY-excel-upload'
                    , url: '/upload/'
                    , auto: false
                    , accept: 'file'
                    , choose: function (obj) {
                        var files = obj.pushFile()
                        var fileArr = Object.values(files)
                        for (var index in files) {
                            if (files.hasOwnProperty(index)) {
                                delete files[index]
                            }
                        }
                        $('#LAY-excel-upload').next().val('');
                        uploadExcel(fileArr)
                    }
                });                
            }
            
            function uploadExcel(files) {
                    try {
                        excel.importExcel(files, {}, function (data, book) {
                            data = excel.filterImportData(data, {
                                'id': 'A'
                                , 'username': 'B'
                                , 'experience': 'C'
                                , 'sex': 'D'
                                , 'score': 'E'
                                , 'city': 'F'
                                , 'classify': 'G'
                                , 'wealth': 'H'
                                , 'sign': 'I'
                            })
                            layer.open({
                                title: '文件转换结果'
                                , area: ['80%', '60%']
                                , tipsMore: true
                                , content: laytpl($('#LAY-excel-export-ans').html()).render({ data: data, files: files })
                                , btn: ['确认上传', '取消']
                                , success: function () {
                                    element.render('tab')
                                    layui.code({})
                                    // 处理合并
                                    for (var file_index in book) {
                                        if (!book.hasOwnProperty(file_index)) {
                                            continue
                                        }
                                        // 遍历每个Sheet
                                        for (var sheet_name in book[file_index].Sheets) {
                                            if (!book[file_index].Sheets.hasOwnProperty(sheet_name)) {
                                                continue
                                            }
                                            var sheetObj = book[file_index].Sheets[sheet_name]
                                            // 仅在有合并参数时进行操作
                                            if (!sheetObj['!merges']) {
                                                continue
                                            }
                                            // 遍历每个Sheet中每个 !merges
                                            for (var merge_index = 0; merge_index < sheetObj['!merges'].length; merge_index++) {
                                                var mergeObj = sheetObj['!merges'][merge_index]
                                                // 每个合并参数的 s.c 表示左上角单元格的列，s.r 表示左上角单元格的行，e.c 表示右下角单元格的列，e.r 表示右下角单元格的行，计算时注意 + 1
                                                $('#table-export-' + file_index + '-' + sheet_name + '-' + mergeObj.s.r + '-' + mergeObj.s.c)
                                                    .prop('rowspan', mergeObj.e.r - mergeObj.s.r + 1)
                                                    .prop('colspan', mergeObj.e.c - mergeObj.s.c + 1)
                                                for (var r = mergeObj.s.r; r <= mergeObj.e.r; r++) {
                                                    for (var c = mergeObj.s.c; c <= mergeObj.e.c; c++) {
                                                        // 排除左上角
                                                        if (r === mergeObj.s.r && c === mergeObj.s.c) {
                                                            continue
                                                        }
                                                        $('#table-export-' + file_index + '-' + sheet_name + '-' + r + '-' + c).remove()
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            })
                        })
                    } catch (e) {
                        layer.alert(e.message)
                    }
                }
)}

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

Answer 1

该回答引用自GPT-3.5,由博主GIS_Liu编写：

根据您提供的信息和截图，您的Java Web应用程序在尝试处理一个表单跳转到一个servlet时遇到了HTTP状态500错误，这通常表示服务器遇到错误，无法完成请求。具体到您的情况，错误是NullPointerException。这个异常通常发生在尝试访问或操作一个null的对象的成员时。

首先，我们应当确定哪个servlet在执行时出现了空指针异常。从您提供的截图来看，出现问题的servlet是selectProAttServlet，因为它在调用selectProAttByCondition方法时抛出了NullPointerException。

解决这个问题，我们需要检查selectProAttServlet和它调用的方法selectProAttByCondition，以确保在处理之前，所有引用的对象都已经被适当地初始化，并且不是null。

在第三张图片的代码中，selectProAttByCondition方法被调用，并且该方法内部调用了p.selectProjectByCondition(sql)。从您的描述和代码来看，可能的问题和解决方案如下：

1. 参数处理：在servlet接收参数时，应确保参数值不为null。您应该检查request.getParameter("proId")和request.getParameter("team")返回的值是否有可能为null。

   String proId = request.getParameter("proId");
   String team = request.getParameter("team");
   // 确保 proId 和 team 不为 null
   if (proId == null || team == null) {
       // 处理 null 参数的情况
   }
   

2. 字符串拼接SQL：在您的SQL查询中，直接拼接字符串来构建SQL语句可能会导致各种问题，包括SQL注入攻击。尽管这不是空指针异常的直接原因，但建议使用PreparedStatement来避免这种风险。

3. 空指针异常：在第二张图片的代码中，如果proId和team都为空，selectProAttByCondition方法会返回null。在servlet中，您需要处理这种情况，以防止在操作返回的list时抛出NullPointerException。

   List<ProAttribution> list = p.selectProAttByCondition(proId, team);
   if (list == null) {
       // 处理 list 为 null 的情况
   }
   

4. 异常处理：确保您的代码有适当的异常处理逻辑，以便在发生错误时提供更多的调试信息。

   try {
       // 尝试执行可能引发异常的代码
   } catch (Exception e) {
       e.printStackTrace();
       // 进一步的异常处理逻辑
   }
   

在解决空指针异常后，还需确保您的表单跳转逻辑是正确的，检查表单中的action属性是否设置为了正确的servlet URL。此外，检查您的web.xml或servlet类上的注解是否正确配置了servlet映射。

最后，请记得检查Tomcat日志文件，它可能包含额外的错误信息，这有助于您定位和解决问题。

以上步骤应该能帮助您诊断和解决问题。如果问题仍然存在，您可能需要进一步检查代码逻辑，或者提供更多的信息以便进行更详细的分析。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订