做品牌折扣微信推广的网站,贵阳企业免费建站,wordpress采集接口,网站如何seo推广特性#xff1a; 支持在拖拽上传单个文件、多个文件、单个文件夹、多个文件夹可自定义headers可自定义过滤上传格式可自定义上传API接口支持显示/隐藏右下角上传队列托盘 sgDragUploadFolder源码
templatediv :class$options.name :dragenteri… 特性 支持在拖拽上传单个文件、多个文件、单个文件夹、多个文件夹可自定义headers可自定义过滤上传格式可自定义上传API接口支持显示/隐藏右下角上传队列托盘 sgDragUploadFolder源码
templatediv :class$options.name :dragenterisDragenter!-- 上传按钮_________________________________________________________ --!-- 上传文件 --el-uploadrefuploadFile:show-file-listfalse:headersheaders:acceptaccept.toString():actionactionUrl:dataactionData:before-uploadbeforeUpload:on-successuploadSuccess:on-erroruploadErrormultiple:namename:auto-uploadautoUpload/el-upload!-- 上传文件夹 --el-uploadrefuploadFolder:show-file-listfalse:headersheaders:actionactionUrl:dataactionData:before-uploadbeforeUpload:on-successuploadSuccess:on-erroruploadError:on-exceedexceedmultiple:drag(drag || drag) !__checkDisabledDrag():namename:auto-uploadautoUpload/el-upload!-- _________________________________________________________ --!-- 上传托盘右下角 --sgUploadTrayv-modelshowUploadTray:datauploadListstopUploadstopUploaddragStart$emit(dragUploadTrayStart, true)dragEnd$emit(dragUploadTrayEnd, true)v-if!(hideUploadTray || hideUploadTray) !sgUploadTrayresizeable//div/templatescriptimport 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-modalsgUploadTray, //引用外部公共托盘组件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(上传失败);},},};/scriptstyle langscss.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 应用
templatedivdiv stylewidth:300px;height:300px;position: relative;img :srcsrc stylewidth:100%;height:100%!-- 上传组件 --sgDragUploadFolder drag refsgDragUploadFolder :data{accept: *,actionUrl: ${$d.API_ROOT_URL}/customer/importCustomerData,} resultBase64ImageresultBase64Image successuploadSuccess erroruploadError hideUploadTray //divel-button typeprimary iconel-icon-upload2 clickd $refs.sgDragUploadFolder.triggerUploadFile()上传/el-button/div
/templatescript
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,JavaScriptTypeScript,CSS2/CSS3/LESS/SASS/SCSS/HTML-CSDN博客你挚爱的强哥擅长Vue.js,JavaScriptTypeScript,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
