<el-dialog title="导入" :visible.sync="upload.open" width="400px" append-to-body :close-on-click-modal="false">
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
:file-list="excelList"
:on-remove="onRemoveDr"
:on-change="onChangeDr"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
</el-upload>
<el-button size="mini" type="success" @click="downloadImportTemplate">下载模板</el-button>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">导 入</el-button>
<el-button @click="cancelFileForm">取 消</el-button>
</div>
</el-dialog>
import { Loading } from "element-ui";
///
//导入
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
// updateSupport: 0,
// 设置上传的请求头部
// 上传的地址
url: ""
},
//上传的文件
excelList:[],
//
//导入按钮
handleImport(){
this.upload.open = true;
},
//导入提交
submitFileForm(){
if (this.excelList.length === 0) {
this.$message.warning("请选择文件");
return;
}
if (this.excelList.length > 1) {
this.$message.warning("每次只能提交一个文件");
return;
}
let formData = new FormData();
this.excelList.forEach((item) => {
formData.append("file", item.raw);
console.log(item.raw);
});
console.log(formData.get("file"));
let loadingInstance = Loading.service({
lock: true, //lock的修改符--默认是false
text: "导入中", //显示在加载图标下方的加载文案
spinner: "el-icon-loading", //自定义加载图标类名
background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
});
uploadFile(formData)
.then((res) => {
loadingInstance.close();
console.log(res);
this.$message({
type: "success",
message: "导入成功!",
});
this.getList();
})
.then(() => {
console.log("关闭 上传");
this.excelList = [];
this.upload.open = false;
})
.finally(() => {
loadingInstance.close();
});
},
//下载导入模板
downloadImportTemplate(){
window.location.href = "https://xxxxxxxxxxxx"
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.excelList = fileList;
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
onChangeDr(file, fileList) {
this.excelList = fileList;
},
onRemoveDr(file, fileList) {
this.excelList = fileList;
},
cancelFileForm(){
this.upload.open = false
this.excelList = [];
},
vue、elementUI的excel文件导入导入
最新推荐文章于 2023-06-15 11:16:47 发布