【sgUpload】自定义上传组件，支持上传文件夹及其子文件夹文件、批量上传，批量上传会有右下角上传托盘出现，支持本地上传图片转换为Base64image

特性：

1. 支持批量上传文件、文件夹
2. 可自定义headers
3. 可自定义过滤上传格式
4. 可自定义上传API接口
5. 支持drag属性开启可拖拽上传文件、文件夹

sgUpload源码

<template><div :class="$options.name" :dragenter="isDragenter"><!-- 上传按钮_________________________________________________________ --><!-- 上传文件 --><el-upload ref="uploadFile" :show-file-list="false" :headers="headers" :accept="accept.toString()":action="actionUrl" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError"></el-upload><!-- 上传文件夹 --><el-upload ref="uploadFolder" :show-file-list="false" :headers="headers" :action="actionUrl":before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError" :on-exceed="exceed" multiple:drag="drag === '' || drag"></el-upload><!-- _________________________________________________________ --><!-- 上传托盘（右下角） --><sgUploadTray v-model="showUploadTray" :data="uploadList" @stopUpload="stopUpload"@dragStart="disabledRectSelect = true" @dragEnd="disabledRectSelect = false"v-if="!(hideUploadTray === '' || hideUploadTray)" /></div>
</template>
<script>
import sgUploadTray from "@/vue/components/admin/sgUploadTray";
export default {name: 'sgUpload',components: { sgUploadTray },data() {return {// 上传----------------------------------------headers: { kkToken: localStorage.token, }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)accept: `.${['png', 'jpg', 'jpeg', 'bmp', 'gif', 'svg'].join(',.')}`,//默认只支持图片格式上传actionUrl: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,dur: 100,percent: 100,uploadList: [],showUploadTray: false,uploadFileBtn: null,//上传文件uploadFolderBtn: null,//上传文件夹isDragenter: false,//是否拖入leaveEvents: ['mouseenter','mouseover','mousemove','mouseout','blur','visibilitychange',],dragAreaDom: null,//拖拽放入区域// ----------------------------------------}},props: ["data", //上传可选参数"hideUploadTray",//不显示上传托盘"drag",//是否支持拖拽上传],watch: {data: {handler(d) {if (d) {d.headers && (this.headers = d.headers);d.accept && (this.accept = d.accept);d.actionUrl && (this.actionUrl = d.actionUrl);}}, deep: true, immediate: true,},drag: {handler(d) {if (d === '' || d) {this.addEvents();} else {this.removeEvents();}}, deep: true, immediate: true,},},mounted() {this.$nextTick(() => {this.uploadFileBtn = this.$refs.uploadFile.$children[0].$refs.input;this.uploadFolderBtn = this.$refs.uploadFolder.$children[0].$refs.input;this.uploadFolderBtn && (this.uploadFolderBtn.webkitdirectory = true);//让el-upload支持上传文件夹this.dragAreaDom = this.$refs.uploadFolder.$el.querySelector(`.el-upload-dragger`);this.dragAreaDom && this.dragAreaDom.addEventListener('drop', this.drop);})},destroyed() {this.removeEvents();},methods: {// 循环获取拖拽过来的file----------------------------------------getDragFiles(e) {let array = [], accept = this.accept, beforeUpload = this.beforeUpload;return new Promise(resolve => {// 循环拖拽的文件夹let items = [].slice.call(e.dataTransfer.items);items.forEach((v, i) => {const webkitGetAsEntry = v.webkitGetAsEntry();eval(webkitGetAsEntry.isDirectory ? 'setfolder' : 'setfile')(webkitGetAsEntry, i === items.length - 1, webkitGetAsEntry.fullPath);});// 处理文件夹function setfolder(webkitGetAsEntry, loopOver, path) {webkitGetAsEntry.createReader().readEntries(entries => (entries.forEach((item, ind) => (item.isFile ? setfile(item, loopOver && ind == entries.length - 1, path) : setfolder(item, loopOver, path)))));}// 处理文件function setfile(webkitGetAsEntry, loopOver, path) {webkitGetAsEntry.file(file => {let isFile = accept === '*' ? true : accept.includes(file.name.toLocaleLowerCase().split(".").pop());// 只获允许的格式if (isFile) {file = new File([file], webkitGetAsEntry.fullPath.replace(`${path}/`, ''), { type: file.type });beforeUpload(file);array.push(file);}});loopOver && resolve(array);// 如果loopOver为true则抛出数据}})},// ----------------------------------------addEvents(d) {this.removeEvents();addEventListener('dragenter', this.dragenter);this.leaveEvents.forEach(v => addEventListener(v, this.leave));this.dragAreaDom && this.dragAreaDom.addEventListener('drop', this.drop);},removeEvents(d) {removeEventListener('dragenter', this.dragenter);this.leaveEvents.forEach(v => removeEventListener(v, this.leave));this.dragAreaDom && this.dragAreaDom.removeEventListener('drop', this.drop);},dragenter(d) {this.isDragenter = true;},leave(d) {this.isDragenter = false;},drop(d) {this.getDragFiles(d).then(files => { });},// 上传按钮触发----------------------------------------triggerUploadFile(d) {this.uploadFileBtn && this.uploadFileBtn.click();},triggerUploadFolder(d) {this.uploadFolderBtn && this.uploadFolderBtn.click();},// 上传文件----------------------------------------------------------------showFakeLoading(file) {file.raw && (file = file.raw);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.raw && (file = file.raw);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) {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 === '*' ? true : 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" });allowUpload && this.$g.file2Base64Image(file, d => this.$emit(`resultBase64Image`, d));return allowUpload; //若返回false则停止上传},//上传成功uploadSuccess(response, file, fileList) {if (response.data && response.data.key) {// 下载失败原因的描述文件this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {s: (d) => {this.$emit(`error`, response, file);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.$emit(`success`, response, file);// 上传成功了this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });this.$message.success(`“${file.name}上传成功`);// this.initList();//刷新列表//console.log('上传成功', response, file, fileList);} else {this.$emit(`error`, response, file);// 其他失败原因this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });// this.$message.error(response.msg);//console.log('上传失败', response, file, fileList);}},//上传失败uploadError(err, file, fileList) {this.$emit(`error`, err, file);this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });this.$message.error("上传失败");//console.log('上传失败', err, file, fileList);},// ----------------------------------------emit(d) {this.$emit(`input`, d);},}
};
</script>
<style lang="scss">
.sgUpload {width: 0;height: 0;.el-upload-dragger {position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999999;display: none;background-color: #ffffff99;&::after {content: "可拖拽文件到该区域上传";position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #743a72;font-size: 18px;font-weight: bold;}}&[dragenter] .el-upload-dragger {display: block;border-color: #743a72;&.is-dragover {background-color: #743a7222;&::after {content: "松掉鼠标上传文件";}}}
}
</style>

应用

<el-button
type="text"
icon="el-icon-upload"
@click="$refs.sgUpload.triggerUploadFile">
批量导入
</el-button><!-- 上传组件 -->
<sgUpload ref="sgUpload" :data="{ accept: '.xls,.xlsx',actionUrl, 
}"
@success="(d,f)=>{}"
@error="(d,f)=>{}"
/>…import sgUpload from "@/vue/components/sgUpload";components: {sgUpload,
},

原始思想来源el-upload实现上传文件夹(批量上传文件)，支持按钮式触发click()唤起上传弹窗（有助于少写一些el-upload节点，做到写一个el-upload组件多处使用）_你挚爱的强哥的博客-CSDN博客/让el-upload支持上传文件夹。【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度_你挚爱的强哥的博客-CSDN博客。【sgUploadTray】上传托盘自定义组件，可实时查看上传列表进度。el-upload实现上传文件夹(批量上传文件)：关键代码在于。sgUploadTray组件在这里。https://blog.csdn.net/qq_37860634/article/details/131721594