说明: 两种导入都可以使用, 第二种方法更简洁
1. 第一种导入文件方式
1-1. 使用组件
<div class="upload-excel">
<el-upload id="eccel"
:disabled="buttonDis?true:false"
class="upload"
ref="upload"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:before-upload="beforeAvatarUpload"
:action="uploadUrl()"
:on-success="uploadSuccess"
:headers="headers"
:multiple="false"
:limit="1">
<el-button :disabled="buttonDis" size="small" type="primary"><i
class="el-icon-upload2"></i> 导入数据
</el-button>
</el-upload>
</div>
1-2. 导入事件
/************导入文件**************/
//对导入文件校验
beforeAvatarUpload(file) {
let excelData = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = excelData === 'xls'
const extension2 = excelData === 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 10;
if (!extension && !extension2) {
this.$message.error('请上传 .xlsx .xls格式的文件!');
return false;
}
if (!isLt2M) {
this.$message.error('上传的文件大小不能超过 10MB!');
return false;
}
const clearTime = 3;
let num = 0;
this.buttonDis = true;
const timer = setInterval(() => {
if (num < clearTime) {
num++
} else {
clearInterval(timer)
this.$refs.upload.clearFiles()
this.buttonDis = false;
}
}, 1000);
return (extension || extension2) && isLt2M
},
//导入excel路径
uploadUrl() {
return (process.env.VUE_APP_BASE_API + '/system/feedingcurve/excel');
},
//导入成功返回信息
uploadSuccess(file) {
if (file.code == 200) {
this.$message({
type: 'success',
message: '导入成功,请等待数据解析!'
});
this.$refs.mychild.getAllCurves(0, "", this.majorType);
} else {
this.$message.error(file.desc);
}
},
2. 第二种导入文件方式
2-1.使用组件
<div class="moban">
<el-upload class="upload-demo" :on-change='fileUpload' :auto-upload="false" action='' accept=".xlsx" :show-file-list="false">
<el-button icon="el-icon-circle-plus-outline" type="primary">导入设备</el-button>
</el-upload>
</div>
2-2. 导入事件
import { uploadBatchDeviceTemplate } from '@/axios/api'
//导入事件
fileUpload (file) {
console.log(file)
if (!file) return;
uploadBatchDeviceTemplate({ file: file.raw }).then((res) => {
if (res.code == 200) {
this.$message.success('导入成功!')
this.fetchDataSearch()
} else {
this.$message.error('导入失败!')
}
})
},