Después de dos días de exploración, no encontré un método adecuado para resolver el problema de carga. Finalmente, lo completé bajo la guía del
jefe (muchas gracias). Primero descargue el complemento de extensión oficial, excel.js y excel en layui-excel / layui_exts /. min.js dos archivos
https://fly.layui.com/extend/excel/
En segundo lugar, introduzca el archivo js en la interfaz HTML y la carpeta layui_exts se encuentra en el directorio directo de la aplicación web.
<script type="text/javascript">
layui.config({
base: '/layui_exts/'
}).extend({
excel: 'excel'
});
</script>
Código de botón
<button class="layui-btn layui-btn-sm" style="background-color: #10A9FF;" id="importExcel">
<i class="layui-icon"></i>上传文件
</button>
Entonces sube
<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>
Si necesita verificar los datos primero, puede descomprimir el código de la capa emergente y agregar el código relevante, de la siguiente manera
<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>