需求描述:
批量上传点击确定按钮再弹出一个dialog 弹框显示成功多少条,失败多少条,可下载查看的失败链接,如全部成功不显示下载查看的链接
<el-button
type="warning"
class="import-button"
icon="el-icon-upload2"
size="mini"
@click="uploadFiles"
>
<i class="icon"></i>
批量导入
</el-button>
<!-- 批量导入弹框 -->
<el-dialog
class="dialog-box"
title="批量导入"
width="25%"
:visible.sync="uploadShowDialog"
>
<!--
class="up-class"
:multiple="false"
:action="#" //手动上传的地址
ref="upload"
:before-upload="beforeUpload" //上传文件之前的钩子,参数为上传的文件
:file-list="fileList" //上传的文件列表
:http-request="uploadHttpRequest" // 覆盖默认的上传行为,可以自定义上传的实现
:on-change="handleUploadChange" //文件状态改变时的钩子
:limit="1" //最大允许上传个数
-->
<el-upload
class="upload-demo"
ref="upload"
action="#"
:multiple="false"
:show-file-list="true"
:before-upload="beforeUpload"
:http-request="uploadHttpRequest"
:file-list="fileList"
:on-change="handleUploadChange"
:limit="1"
>
<div class="border">
<i class="el-icon-plus"></i>
</div>
<div slot="tip" class="el-upload-tip">只能上传.xls、.xlsx文件</div>
</el-upload>
<span slot="footer">
<el-button @click="submitUpload" type="primary"> 导入 </el-button>
<el-button @click="uploadShowDialog = false" class="cancelDialog">
取消
</el-button>
</span>
</el-dialog>
<script>
import {
updateList,
batchDispatchOrder,
batchuploadFile,
downloadDevices
} from '@/api/employment/waitingList.js';
export default {
data() {
return {
file: null,
//加载动画
uploadLoading: false,
//上传的文件列表
fileList: [],
//控制弹出框显示与否
uploadShowDialog: false,
//上传地址
uploadURL: '',
//loading加载中
downloadLoading: '',
}
}
}
</script>
uploadFiles() {
this.uploadLoading = false;
this.fileList = [];
this.uploadShowDialog = true;
// setTimeout(() => {
// //清空已上传的文件列表
// this.$refs.upload.clearFiles();
// }, 100);
},
// 限制文件上传的个数只有一个,获取上传列表的最后一个
handleUploadChange(file, fileList) {
if (fileList.length > 0) {
// 这一步,是展示最后一次选择的文件
this.fileList = [fileList[fileList.length - 1]];
}
},
// 上传文件之前,先判断文件后缀和大小
beforeUpload(file) {
//截取文件后缀名
const fileName = file.name.substring(file.name.lastIndexOf('.'));
if (
fileName.toLowerCase() != '.xls' &&
fileName.toLowerCase() != '.xlsx'
) {
this.$message.error('文件必须为.xls或xlsx类型');
this.fileList = [];
return false;
}
//读取文件大小
var fileSize = file.size;
console.log(fileSize);
if (fileSize > 1048576) {
this.uploadShowDialog = false;
this.$message({
type: 'error',
showClose: true,
duration: 3000,
message: '文件不能大于1M!'
});
return false;
}
},
// 覆盖element的默认上传文件
uploadHttpRequest(file) {
this.file = file;
},
//点击确定上传按钮
submitUpload() {
// loading加载中,通过this.downloadLoading.close()可关闭
if (this.fileList.length === 0) {
this.$message({
type: 'error',
showClose: true,
duration: 3000,
message: '请选择要上传的文件'
});
return false;
}
//调接口上传
let formData = new FormData();
//控制台打印file,找到要上传的file,图中.raw
formData.append('file', this.file.file);
if (!!this.file.file) {
this.downloadLoading = this.$loading({
lock: true,
text: '数据导入中...',
color: '#0183FF',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
});
//注:formData中的数据不能直接打印,需要用到get方法得到
// batchuploadFile是接口
batchuploadFile(formData).then(res => {
this.uploadShowDialog = false;
this.handleQuery();
});
} else {
this.downloadLoading.close();
}
}
附上原图: