el-upload implements upload folders (batch upload files): the key code is
this.$refs.uploadFolder.$children[0].$refs.input.webkitdirectory = true;//Let el-upload support upload folder
characteristic:
- Support batch upload all files in the folder
- Support interrupt and abandon upload
- Support cheating loading animation effect (1%~99% is loaded until the real upload is completed and automatically becomes 100%)
- Support button trigger click() to evoke the upload pop-up window (helps to write less el-upload nodes, so that one el-upload component can be used in multiple places)
<template>
<div class="sg-body">
<el-upload
ref="uploadFolder"
:show-file-list="false"
:headers="headers"
:accept="accept"
:action="actionURL"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:on-exceed="exceed"
multiple
/>
<el-button type="primary" @click="uploadBtn.click()">点击上传文件夹</el-button>
<!-- 上传托盘(右下角) -->
<sgUploadTray v-model="showUploadTray" :data="uploadList" @stopUpload="stopUpload" />
</div>
</template>
<script>
import sgUploadTray from "@/vue/components/admin/sgUploadTray";
export default {
components: {
sgUploadTray,
},
data() {
return {
//上传相关变量----------------------------------------
headers: { kkToken: localStorage.token, }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
accept:`.${["png", "jpg", "jpeg", "bmp", "gif"].join(",.")}`,//允许上传的后缀名
actionURL: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,
dur: 100,
percent: 100,
uploadBtn: null,//上传按钮
uploadList: [],
showUploadTray: false,
// ----------------------------------------
}
},
mounted(d) {
this.$nextTick(() => {
this.uploadBtn = this.$refs.uploadFolder.$children[0].$refs.input;
this.uploadBtn.webkitdirectory = true;//让el-upload支持上传文件夹
})
},
methods: {
// 上传文件----------------------------------------------------------------
showFakeLoading(file) {
file = this.uploadList.find(v => v.uid == file.uid);
clearInterval(file.interval);
file.percent = 0;
file.interval = setInterval(() => {
file.percent++;
file.percent >= 99 && this.hideFakeLoading(file);
}, this.dur);
},
hideFakeLoading(file, { type, tip, color } = {}) {
file = this.uploadList.find(v => v.uid == file.uid);
clearInterval(file.interval);
switch (type) {
case 'error':
file.percent = 0;
break;
case 'success':
default:
file.percent = 100;
}
type && (file.type = type);
tip && (file.tip = tip);
color && (file.color = color);
},
exceed(file, fileList) {
this.$message.error("上传文件数量太大,分散上传吧!");
},
stopUpload(d) {
this.$refs.uploadFolder.abort();
//console.log(`取消上传`, d);
},
//文件上传之前
beforeUpload(file, id) {
this.uploadList.unshift({
interval: false,
uid: file.uid,
percent: 0,//加载进度
name: file.name,
size: file.size,
type: file.type,
webkitRelativePath: file.webkitRelativePath,
type: '',
tip: '',
color: '',
});
this.showUploadTray = true;
// 判断是不是特定的格式________________________
let isFile = this.accept.includes(file.name.toLocaleLowerCase().split(".").pop());
const maxSize = 50; //限制大小
const isAllowSize = file.size / 1024 / 1024 <= maxSize;
isFile || this.$message.error("上传文件只能是" + this.accept+ "格式");
isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
let allowUpload = isFile && isAllowSize;
allowUpload ? this.showFakeLoading(file) : this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
return allowUpload; //若返回false则停止上传
},
//上传成功
uploadSuccess(response, file, fileList) {
if (response.data && response.data.key) {
// 下载失败原因的描述文件
this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
s: (d) => {
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
this.$message.error(`${file.name}-上传失败,请查看失败原因`);
// this.initList();//刷新列表
//console.log('上传失败', response, file, fileList);
}
});
} else if (response.success) {
// 上传成功了
this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });
this.$message.success(`“${file.name}上传成功`);
// this.initList();//刷新列表
//console.log('上传成功', response, file, fileList);
} else {
// 其他失败原因
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$message.error(response.msg);
//console.log('上传失败', response, file, fileList);
}
},
//上传失败
uploadError(err, file, fileList) {
this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
this.$message.error("上传失败");
//console.log('上传失败', err, file, fileList);
},
// ----------------------------------------
},
};
</script>
<style lang="scss" scoped>
.sg-body {
width: 100vw;
height: 100vh;
overflow: hidden;
overflow-y: auto;
}
</style>
The sgUploadTray component used here is here [sgUploadTray] Upload the custom component of the tray, and you can view the progress of the upload list in real time_Your beloved strong brother's blog-CSDN blog [sgUploadTray] Upload the custom component of the tray, you can view the progress of the upload list in real time. https://blog.csdn.net/qq_37860634/article/details/131721614