公司建设网站的公司,杭州制作网站企业,网站建站需要什么,购物网站功能特性#xff1a; 支持批量上传文件、文件夹可自定义headers可自定义过滤上传格式可自定义上传API接口支持drag属性开启可拖拽上传文件、文件夹 sgUpload源码
templatediv :class$options.name :dragenterisDragenter!-- 上传按钮… 特性 支持批量上传文件、文件夹可自定义headers可自定义过滤上传格式可自定义上传API接口支持drag属性开启可拖拽上传文件、文件夹 sgUpload源码
templatediv :class$options.name :dragenterisDragenter!-- 上传按钮_________________________________________________________ --!-- 上传文件 --el-upload refuploadFile :show-file-listfalse :headersheaders :acceptaccept.toString():actionactionUrl :before-uploadbeforeUpload :on-successuploadSuccess :on-erroruploadError/el-upload!-- 上传文件夹 --el-upload refuploadFolder :show-file-listfalse :headersheaders :actionactionUrl:before-uploadbeforeUpload :on-successuploadSuccess :on-erroruploadError :on-exceedexceed multiple:dragdrag || drag/el-upload!-- _________________________________________________________ --!-- 上传托盘右下角 --sgUploadTray v-modelshowUploadTray :datauploadList stopUploadstopUploaddragStartdisabledRectSelect true dragEnddisabledRectSelect falsev-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 langscss
.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
typetext
iconel-icon-upload
click$refs.sgUpload.triggerUploadFile
批量导入
/el-button!-- 上传组件 --
sgUpload refsgUpload :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
