经过两天的摸索,始终没有找到合适方法,解决上传的问题,最后在大佬的指导下完成(非常感谢)
首先下载官方扩展插件,在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>