项目需求:
一个功能可以导入表格数据,还有模板提供下载参考
大致的功能需求就是这样了,上传文件的组件用的是element-UI自带的组件
配置参数:
我使用的是手动上传模块
参数 | 说明 |
---|---|
action | 必选参数,上传的地址 |
multiple | 是否支持多选文件 |
limit | 最大允许上传个数 |
on-exceed | 文件超出个数限制时的钩子 |
http-request | 覆盖默认的上传行为,可以自定义上传的实现 |
:before-upload | 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 |
file-list | 上传的文件列表 |
auto-upload | 是否在选取文件后立即进行上传 |
<!----- 上传部分 ----->
<el-upload
class="upload-demo"
ref="upload"
action=""
name="excelFile"
:multiple="false"
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFile"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">
<p>只能上传excel文件</p>
</div>
</el-upload>
<!----- 下载按钮 ----->
<div class="bottom">
<span @click="download">模板下载</span>
</div>
js方法部分:
<!----- 上传部分 ----->
handleExceed(){
this.$notify({
title: '警告',
message: '只能上传一个文件哦!,若需要上传其他文件请先移除已选择的文件',
type: 'warning'
});
},
uploadFile(item){
//我的项目要求formdata上传数据
const form = new FormData();
form.append('FireAlarmDeviceSn',this.networkPage.DeviceSn)
form.append('file',item.file)
this.$axios.post(this.$api.ImportFireAlarmDetector,form).then(res=>{
console.log("res",res)
if(res.data.result.success){
this.$message({
message: '导入数据成功!',
type: 'success'
});
this.GetDeviceDetectorList();//获取联网部件tablelist
}else{
this.$message({
showClose: true,
message: `导入失败!${res.data.result.failCause}`,
type: 'error',
duration:'6000'
});
}
this.fileList =[]
this.$refs.network_importDialog.dialogVisible = false
}).catch(err=>{
console.log("err",err)
})
},
//上传之前的判断文件大小和格式
beforeAvatarUpload(file){
const extension = file.name.split(".")[1] === "xls";
const extension2 = file.name.split(".")[1] === "xlsx";
if (!extension && !extension2) {
alert("上传模板只能是 xls、xlsx格式!");
}
},
submitUpload(){
this.$confirm('导入的方式会覆盖现有的记录, 是否继续?', '导入数据', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$refs.upload.submit();
}).catch(() => {
});
}
<!----- 下载部分 ----->
//模板下载,后端配置好地址,只需要用a标签下载即可
download(){
let link = document.createElement('a')
link.style.display = 'none'
link.href = 'http://futest.sctsjkj.com/template/消防火警联网部件设施数据表.xlsx';
link.click();
},