【sgDragUploadFolder】自定义组件：自定义拖拽文件夹上传组件，支持上传单个或多个文件/文件夹，右下角上传托盘出现（后续更新...）

特性：

支持在拖拽上传单个文件、多个文件、单个文件夹、多个文件夹
可自定义headers
可自定义过滤上传格式
可自定义上传API接口
支持显示/隐藏右下角上传队列托盘

sgDragUploadFolder源码

<template><div :class="$options.name" :dragenter="isDragenter"><!-- 上传按钮_________________________________________________________ --><!-- 上传文件 --><el-uploadref="uploadFile":show-file-list="false":headers="headers":accept="accept.toString()":action="actionUrl":data="actionData":before-upload="beforeUpload":on-success="uploadSuccess":on-error="uploadError"multiple:name="name":auto-upload="autoUpload"></el-upload><!-- 上传文件夹 --><el-uploadref="uploadFolder":show-file-list="false":headers="headers":action="actionUrl":data="actionData":before-upload="beforeUpload":on-success="uploadSuccess":on-error="uploadError":on-exceed="exceed"multiple:drag="(drag === '' || drag) && !__checkDisabledDrag()":name="name":auto-upload="autoUpload"></el-upload><!-- _________________________________________________________ --><!-- 上传托盘（右下角） --><sgUploadTrayv-model="showUploadTray":data="uploadList"@stopUpload="stopUpload"@dragStart="$emit(`dragUploadTrayStart`, true)"@dragEnd="$emit(`dragUploadTrayEnd`, true)"v-if="!(hideUploadTray === '' || hideUploadTray) && !sgUploadTray"resizeable/></div></template><script>import sgUploadTray from "@/vue/components/admin/sgUploadTray";export default {name: "sgDragUploadFolder",components: { sgUploadTray },data() {return {// 上传----------------------------------------name: "file", //上传的文件字段名headers: { kkToken: localStorage.token }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)accept: `.${["png", "jpg", "jpeg", "bmp", "gif", "svg"].join(",.")}`, //默认只支持图片格式上传// actionUrl: `${this.$d.API_ROOT_URL}/customer/importCustomerData`,actionUrl: `#`,actionData: {},dur: 100,percent: 100,uploadList: [],showUploadTray: false,uploadFileBtn: null, //上传文件uploadFolderBtn: null, //上传文件夹isDragenter: false, //是否拖入leaveEvents: ["mouseenter","mouseover","mousemove","mouseout","blur","visibilitychange",],dragAreaDom: null, //拖拽放入区域isDragTrigger: false, //是否为拖拽触发上传maxSize: null, //支持最大上传文件大小autoUpload: true, //是否在选取文件后立即进行上传// ----------------------------------------};},props: ["data", //上传可选参数"hideUploadTray", //不显示上传托盘"hideUploadTrayWhenDrag", //拖拽上传的时候隐藏上传托盘（默认显示）"drag", //是否支持拖拽文件、文件夹或多个文件"disabledWhenShowSels", //当出现对应['sel','sel','sel',...]的时候，屏蔽拖拽上传（譬如出现element的v-modal）"sgUploadTray", //引用外部公共托盘组件dom（这种方式主要是为了解决同一个页面有多个上传托盘组件导致冲突的问题）],watch: {data: {handler(d) {if (d) {d.name && (this.name = d.name);d.headers && (this.headers = d.headers);d.accept && (this.accept = d.accept);d.actionUrl && (this.actionUrl = d.actionUrl);d.actionData && (this.actionData = d.actionData);d.maxSize && (this.maxSize = d.maxSize);typeof d.autoUpload !== "undefined" && (this.autoUpload = d.autoUpload);}},deep: true,immediate: true,},drag: {handler(d) {if (d === "" || d) {this.addEvents();} else {this.removeEvents();}},deep: true,immediate: true,},showUploadTray(newValue, oldValue) {this.sgUploadTray && (this.sgUploadTray.show = newValue);},uploadList: {handler(d) {if (this.sgUploadTray) {this.sgUploadTray.uploadList || (this.sgUploadTray.uploadList = []);let uploadList = this.sgUploadTray.uploadList;d.forEach((newVal) => {// 避免重复添加到上传列表if (!uploadList.some((oldVal) => oldVal.uid == newVal.uid)) {uploadList.push(newVal);if (this.hideUploadTrayWhenDrag === "" || this.hideUploadTrayWhenDrag) {this.sgUploadTray.show = false; //不显示右下角上传托盘} else {this.sgUploadTray.show = true; //显示右下角上传托盘}}});}},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: {__checkDisabledDrag(d) {let aa = this.disabledWhenShowSels || [];aa && (Array.isArray(aa) || (aa = [aa]));let r = [];for (let i = 0, len = aa.length; i < len; i++) {let a = aa[i];let dom = document.querySelector(a);if (dom) {r.push(dom);return true;}}return r.length !== 0;},// 监听----------------------------------------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.isDragTrigger = true;this.isDragenter = true;},leave(d) {this.isDragenter = false;},drop(d) {// 触发拖拽上传this.uploadDragFiles(d,(file) => {file.isDragFile = true;this.beforeUpload(file);},(files) => {});},// 循环获取拖拽过来的file----------------------------------------uploadDragFiles(e, uploadFunc, completeFunc) {let files = [],items = [].slice.call(e.dataTransfer.items);items.forEach((v, i) => {const webkitGetAsEntry = v.webkitGetAsEntry();eval(webkitGetAsEntry.isDirectory ? "setfolder" : "setfile")(webkitGetAsEntry);});// 处理文件夹function setfolder(webkitGetAsEntry) {webkitGetAsEntry.createReader().readEntries((entries) =>entries.forEach((item) => (item.isFile ? setfile(item) : setfolder(item))));}// 处理文件function setfile(webkitGetAsEntry) {webkitGetAsEntry.file((file) => {uploadFunc && uploadFunc(file);files.push(file);});}completeFunc && completeFunc(files);},// 上传按钮触发----------------------------------------triggerUploadFile(d) {this.isDragTrigger = false;this.uploadFileBtn && this.uploadFileBtn.click();},triggerUploadFolder(d) {this.isDragTrigger = false;this.uploadFolderBtn && this.uploadFolderBtn.click();},// 判断是否相同uidsame_uid_lastModified(uid, file) {return (uid == file.uid ||uid == file.lastModified ||uid == (file.raw || {}).lastModified);},// 获取uidget_uid(file) {return file.uid || file.lastModified || (file.raw || {}).lastModified;},// 上传文件----------------------------------------------------------------showFakeLoading(file) {this.$emit(`showFakeLoading`, file);file.raw && (file = file.raw);file = this.uploadList.find((v) => this.same_uid_lastModified(v.uid, file)); //拖拽上传的时候没有uidclearInterval(file.interval);file.percent = 0;file.interval = setInterval(() => {file.percent >= 99 ? this.hideFakeLoading(file) : file.percent++;}, this.dur);},hideFakeLoading(file, { type, tip, color } = {}) {this.$emit(`hideFakeLoading`, file);// file.raw && (file = file.raw);//不需要2023.12.18file = this.uploadList.find((v) => this.same_uid_lastModified(v.uid, file)); //拖拽上传的时候没有uidclearInterval(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();},//文件上传之前beforeUpload(file) {if ((this.drag === "" || this.drag) && this.isDragTrigger) {if (!file.isDragFile) return; //拖拽模式下，如果不是原生js捕获到的拖拽文件，就不进入上传队列（区别开两个el-upload组件避免重复上传）}this.uploadList.unshift({interval: null,uid: this.get_uid(file), //拖拽上传的时候没有uidpercent: 0, //加载进度name: file.name,size: file.size,type: file.type,webkitRelativePath: file.webkitRelativePath,type: "",tip: "",color: "",});if (this.hideUploadTrayWhenDrag === "" || this.hideUploadTrayWhenDrag) {this.showUploadTray = false; //不显示右下角上传托盘} else {this.showUploadTray = true; //显示右下角上传托盘}// 判断是不是特定的格式________________________let isFile =this.accept === "*"? true: this.accept.includes(file.name.toLocaleLowerCase().split(".").pop());const minSize = 0.001; //限制文件最小1KBconst isAllowMinSize = file.size / 1024 / 1024 > minSize;isAllowMinSize ||this.$message.error("上传文件大小不能小于" + minSize * 1000 + "KB");const maxSize = this.maxSize || 500; //限制大小const isAllowSize = file.size / 1024 / 1024 <= maxSize;isFile || this.$message.error("上传文件只能是" + this.accept + "格式");isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");let allowUpload = isFile && isAllowSize && isAllowMinSize;if (allowUpload) {this.showFakeLoading(file);this.$nextTick(() => {this.$g.file2Base64Image(file, (d) => this.$emit(`resultBase64Image`, d));this.$emit(`beforeUpload`, file);});} else {this.hideFakeLoading(file, { type: "error", tip: "上传失败", color: "red" });}return allowUpload; //若返回false则停止上传},//上传成功uploadSuccess(response, file, fileList) {/* if ((this.drag === "" || this.drag) && this.isDragTrigger) {if (!file.isDragFile) return; //拖拽模式下，如果不是原生js捕获到的拖拽文件，就不进入上传队列（区别开两个el-upload组件避免重复上传）}*/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}-上传失败，请查看失败原因`);},}); */} else if (response.success) {this.$emit(`uploadSuccess`, response, file);// 上传成功了this.hideFakeLoading(file, { type: "success", tip: "上传成功", color: "green" });this.$message.success(`${file.name}上传成功`);} else {this.$emit(`uploadError`, response, file);// 其他失败原因this.hideFakeLoading(file, { type: "error", tip: "上传失败", color: "red" });}},//上传失败uploadError(err, file, fileList) {if (this.actionUrl === "#") return;if ((this.drag === "" || this.drag) && this.isDragTrigger) {if (!file.isDragFile) return; //拖拽模式下，如果不是原生js捕获到的拖拽文件，就不进入上传队列（区别开两个el-upload组件避免重复上传）}this.$emit(`uploadError`, err, file);this.hideFakeLoading(file, { type: "error", tip: "上传失败", color: "red" });this.$message.error("上传失败");},},};</script><style lang="scss">.sgDragUploadFolder {width: 0;height: 0;.el-upload-dragger {z-index: 999999; //根据情况自己拿捏position: absolute;width: 100%;height: 100%;left: 0;top: 0;display: none;background-color: #ffffff99;&::after {content: "拖拽文件到此处";position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #409eff;font-size: 18px;font-weight: bold;line-height: 1.2;}}&[dragenter] .el-upload-dragger {display: block;border-color: #409eff;&.is-dragover {background-color: #409eff22;&::after {content: "松掉鼠标上传文件";}}}}</style>

应用

<template><div><div style="width:300px;height:300px;position: relative;"><img :src="src" style="width:100%;height:100%"><!-- 上传组件 --><sgDragUploadFolder drag ref="sgDragUploadFolder" :data="{accept: `*`,actionUrl: `${$d.API_ROOT_URL}/customer/importCustomerData`,}" @resultBase64Image="resultBase64Image" @success="uploadSuccess" @error="uploadError" hideUploadTray /></div><el-button type="primary" icon="el-icon-upload2" @click="d => $refs.sgDragUploadFolder.triggerUploadFile()">上传</el-button></div>
</template><script>
import sgDragUploadFolder from "@/vue/components/admin/sgDragUploadFolder";
export default {components: {sgDragUploadFolder,},data() {return {src: '',}},methods: {resultBase64Image(d, f) {this.src = d;},uploadSuccess(d, f) { }, uploadError(d, f) { },}
};
</script>

基于sgUpload升级改版你挚爱的强哥_Vue.js,JavaScript&TypeScript,CSS2/CSS3/LESS/SASS/SCSS/HTML-CSDN博客你挚爱的强哥擅长Vue.js,JavaScript&TypeScript,CSS2/CSS3/LESS/SASS/SCSS/HTML,等方面的知识,你挚爱的强哥关注css,html5,scss,firefox,elementui,正则表达式,stylus,csrf,express,intellij-idea,ajax,tdesign,ecmascript,edge,java,postman,webpack,electron,html,sass,firebug,github,chrome,spring cloud,layui,visualstudio,less,javascript,fiddler,eclipse,angular.js,angular,前端框架,node.js,chrome devtools,css3,gulp,safari,idea,mybatis,arco design,前端,es6,vue.js,turbopack,bootstrap,webkit,postcss,jquery,anti-design-vue,intellij idea,visual studio code,react.js,webstorm,git,echarts,json,xss,typescript,sublime text,myeclipse,coffeescript,编辑器,npm,reactjs,xhtml,easyui,spring boot,vscode,yarn,view design领域.https://blog.csdn.net/qq_37860634