From 263209dc919d8a455d31316f86b45c601ad49e1b Mon Sep 17 00:00:00 2001 From: lockingreal <1191515088@qq,com> Date: Sat, 26 Mar 2022 16:25:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20upload=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/upload/index.vue | 106 ++--- src/component/upload/layui-upload.js | 563 +++++++++++++++++++++++++++ 2 files changed, 619 insertions(+), 50 deletions(-) create mode 100644 src/component/upload/layui-upload.js diff --git a/src/component/upload/index.vue b/src/component/upload/index.vue index 7eeb8a24..cff148a5 100644 --- a/src/component/upload/index.vue +++ b/src/component/upload/index.vue @@ -41,58 +41,65 @@ const slot = useSlots(); const slots = slot.default && slot.default(); const isDragEnter = ref(false); -interface localUploadOption{ - url:string, - file?:unknown, - otherRequestData?:any +interface localUploadOption { + url: string; + file?: unknown; + otherRequestData?: any; } -const localUpload = (option:any) => { - let file, formData, xhr: XMLHttpRequest, loadedevt, total, per: number, url, uploading; - formData = new FormData(); - xhr = new XMLHttpRequest(); - url = option.url; - file = option.file; - formData.append("files", file); - //append 其他数据 - if (option.otherRequestData instanceof Object) { - var _requestDate = option.otherRequestData; - for (var key in _requestDate) { - formData.append(key, _requestDate[key]); - } +const localUpload = (option: any) => { + let file, + formData, + xhr: XMLHttpRequest, + loadedevt, + total, + per: number, + url, + uploading; + formData = new FormData(); + xhr = new XMLHttpRequest(); + url = option.url; + file = option.file; + formData.append("files", file); + //append 其他数据 + if (option.otherRequestData instanceof Object) { + var _requestDate = option.otherRequestData; + for (var key in _requestDate) { + formData.append(key, _requestDate[key]); } - //事件回调 - // event callbacks - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) { - option.successF instanceof Function && - option.successF(xhr.responseText); - } else { - option.errorF instanceof Function && option.errorF(xhr.responseText); - } + } + //事件回调 + // event callbacks + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) { + option.successF instanceof Function && + option.successF(xhr.responseText); } else { - option.errorF instanceof Function && option.errorF(); + option.errorF instanceof Function && option.errorF(xhr.responseText); } - }; - //侦查当前附件上传情况 - /** - * 附件的上传进度条方法在xhr.upload.onprogeress上， - * 还有一个xhr.onprogress,是下载时候的进度条,*** - * */ - xhr.upload.onprogress = function (event) { - // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0 - if (event.lengthComputable) { - loadedevt = event.loaded; - total = event.total; - per = Math.floor((100 * loadedevt) / total); - } - //执行回调 - option.uploadProgress instanceof Function && option.uploadProgress(per); - }; - xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面 - xhr.setRequestHeader("Accept", "application/json, text/javascript"); - xhr.send(formData); + } else { + option.errorF instanceof Function && option.errorF(); + } + }; + //侦查当前附件上传情况 + /** + * 附件的上传进度条方法在xhr.upload.onprogeress上， + * 还有一个xhr.onprogress,是下载时候的进度条,*** + * */ + xhr.upload.onprogress = function (event) { + // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0 + if (event.lengthComputable) { + loadedevt = event.loaded; + total = event.total; + per = Math.floor((100 * loadedevt) / total); + } + //执行回调 + option.uploadProgress instanceof Function && option.uploadProgress(per); + }; + xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面 + xhr.setRequestHeader("Accept", "application/json, text/javascript"); + xhr.send(formData); }; const getUploadChange = (e: any) => { @@ -102,12 +109,11 @@ const getUploadChange = (e: any) => { if (props.url) { // 表单提交 localUpload({ - url:props.url, - file:file + url: props.url, + file: file, }); } else { // - } }; const uploadDragOver = (e: any) => { diff --git a/src/component/upload/layui-upload.js b/src/component/upload/layui-upload.js new file mode 100644 index 00000000..b99b240b --- /dev/null +++ b/src/component/upload/layui-upload.js @@ -0,0 +1,563 @@ +/*! + * upload 文件上传组件 + * MIT Licensed + */ + +layui.define('layer' , function(exports){ + "use strict"; + + var $ = layui.$ + ,layer = layui.layer + ,hint = layui.hint() + ,device = layui.device() + + //外部接口 + ,upload = { + config: {} //全局配置项 + + //设置全局项 + ,set: function(options){ + var that = this; + that.config = $.extend({}, that.config, options); + return that; + } + + //事件 + ,on: function(events, callback){ + return layui.onevent.call(this, MOD_NAME, events, callback); + } + } + + //操作当前实例 + ,thisUpload = function(){ + var that = this; + return { + upload: function(files){ + that.upload.call(that, files); + } + ,reload: function(options){ + that.reload.call(that, options); + } + ,config: that.config + } + } + + //字符常量 + ,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' + + ,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag' + + + //构造器 + ,Class = function(options){ + var that = this; + that.config = $.extend({}, that.config, upload.config, options); + that.render(); + }; + + //默认配置 + Class.prototype.config = { + accept: 'images' //允许上传的文件类型：images/file/video/audio + ,exts: '' //允许上传的文件后缀名 + ,auto: true //是否选完文件后自动上传 + ,bindAction: '' //手动上传触发的元素 + ,url: '' //上传地址 + ,field: 'file' //文件字段名 + ,acceptMime: '' //筛选出的文件类型，默认为所有文件 + ,method: 'post' //请求上传的 http 类型 + ,data: {} //请求上传的额外参数 + ,drag: true //是否允许拖拽上传 + ,size: 0 //文件限制大小，默认不限制 + ,number: 0 //允许同时上传的文件数，默认不限制 + ,multiple: false //是否允许多文件上传，不支持ie8-9 + }; + + //初始渲染 + Class.prototype.render = function(options){ + var that = this + ,options = that.config; + + options.elem = $(options.elem); + options.bindAction = $(options.bindAction); + + that.file(); + that.events(); + }; + + //追加文件域 + Class.prototype.file = function(){ + var that = this + ,options = that.config + ,elemFile = that.elemFile = $([ + '' + ].join('')) + ,next = options.elem.next(); + + if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){ + next.remove(); + } + + //包裹ie8/9容器 + if(device.ie && device.ie < 10){ + options.elem.wrap('
'); + } + + that.isFile() ? ( + that.elemFile = options.elem + ,options.field = options.elem[0].name + ) : options.elem.after(elemFile); + + //初始化ie8/9的Form域 + if(device.ie && device.ie < 10){ + that.initIE(); + } + }; + + //ie8-9初始化 + Class.prototype.initIE = function(){ + var that = this + ,options = that.config + ,iframe = $('') + ,elemForm = $(['
' + ,'
'].join('')); + + //插入iframe + $('#'+ ELEM_IFRAME)[0] || $('body').append(iframe); + + //包裹文件域 + if(!options.elem.next().hasClass(ELEM_FORM)){ + that.elemFile.wrap(elemForm); + + //追加额外的参数 + options.elem.next('.'+ ELEM_FORM).append(function(){ + var arr = []; + layui.each(options.data, function(key, value){ + value = typeof value === 'function' ? value() : value; + arr.push('') + }); + return arr.join(''); + }()); + } + }; + + //异常提示 + Class.prototype.msg = function(content){ + return layer.msg(content, { + icon: 2 + ,shift: 6 + }); + }; + + //判断绑定元素是否为文件域本身 + Class.prototype.isFile = function(){ + var elem = this.config.elem[0]; + if(!elem) return; + return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file' + } + + //预读图片信息 + Class.prototype.preview = function(callback){ + var that = this; + if(window.FileReader){ + layui.each(that.chooseFiles, function(index, file){ + var reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = function(){ + callback && callback(index, file, this.result); + } + }); + } + }; + + //执行上传 + Class.prototype.upload = function(files, type){ + var that = this + ,options = that.config + ,elemFile = that.elemFile[0] + + //高级浏览器处理方式，支持跨域 + ,ajaxSend = function(){ + var successful = 0, aborted = 0 + ,items = files || that.files || that.chooseFiles || elemFile.files + ,allDone = function(){ //多文件全部上传完毕的回调 + if(options.multiple && successful + aborted === that.fileLength){ + typeof options.allDone === 'function' && options.allDone({ + total: that.fileLength + ,successful: successful + ,aborted: aborted + }); + } + }; + layui.each(items, function(index, file){ + var formData = new FormData(); + + formData.append(options.field, file); + + //追加额外的参数 + layui.each(options.data, function(key, value){ + value = typeof value === 'function' ? value() : value; + formData.append(key, value); + }); + + //提交文件 + var opts = { + url: options.url + ,type: 'post' //统一采用 post 上传 + ,data: formData + ,contentType: false + ,processData: false + ,dataType: 'json' + ,headers: options.headers || {} + //成功回调 + ,success: function(res){ + successful++; + done(index, res); + allDone(); + } + //异常回调 + ,error: function(){ + aborted++; + that.msg('请求上传接口出现异常'); + error(index); + allDone(); + } + }; + //进度条 + if(typeof options.progress === 'function'){ + opts.xhr = function(){ + var xhr = $.ajaxSettings.xhr(); + //上传进度 + xhr.upload.addEventListener("progress", function (obj) { + if(obj.lengthComputable){ + var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比 + options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index); + } + }); + return xhr; + } + } + $.ajax(opts); + }); + } + + //低版本IE处理方式，不支持跨域 + ,iframeSend = function(){ + var iframe = $('#'+ ELEM_IFRAME); + + that.elemFile.parent().submit(); + + //获取响应信息 + clearInterval(Class.timer); + Class.timer = setInterval(function() { + var res, iframeBody = iframe.contents().find('body'); + try { + res = iframeBody.text(); + } catch(e) { + that.msg('获取上传后的响应信息出现异常'); + clearInterval(Class.timer); + error(); + } + if(res){ + clearInterval(Class.timer); + iframeBody.html(''); + done(0, res); + } + }, 30); + } + + //统一回调 + ,done = function(index, res){ + that.elemFile.next('.'+ ELEM_CHOOSE).remove(); + elemFile.value = ''; + if(typeof res !== 'object'){ + try { + res = JSON.parse(res); + } catch(e){ + res = {}; + return that.msg('请对上传接口返回有效JSON'); + } + } + typeof options.done === 'function' && options.done(res, index || 0, function(files){ + that.upload(files); + }); + } + + //统一网络异常回调 + ,error = function(index){ + if(options.auto){ + elemFile.value = ''; + } + typeof options.error === 'function' && options.error(index || 0, function(files){ + that.upload(files); + }); + } + + ,exts = options.exts + ,check ,value = function(){ + var arr = []; + layui.each(files || that.chooseFiles, function(i, item){ + arr.push(item.name); + }); + return arr; + }() + + //回调返回的参数 + ,args = { + //预览 + preview: function(callback){ + that.preview(callback); + } + //上传 + ,upload: function(index, file){ + var thisFile = {}; + thisFile[index] = file; + that.upload(thisFile); + } + //追加文件到队列 + ,pushFile: function(){ + that.files = that.files || {}; + layui.each(that.chooseFiles, function(index, item){ + that.files[index] = item; + }); + return that.files; + } + //重置文件 + ,resetFile: function(index, file, filename){ + var newFile = new File([file], filename); + that.files = that.files || {}; + that.files[index] = newFile; + } + } + + //提交上传 + ,send = function(){ + //选择文件的回调 + if(type === 'choose' || options.auto){ + options.choose && options.choose(args); + if(type === 'choose'){ + return; + } + } + + //上传前的回调 - 如果回调函数明确返回false，则停止上传(#pulls55) + if(options.before && (options.before(args) === false)) return; + + //IE兼容处理 + if(device.ie){ + return device.ie > 9 ? ajaxSend() : iframeSend(); + } + + ajaxSend(); + } + + //校验文件格式 + value = value.length === 0 + ? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '') + : value; + + if(value.length === 0) return; + + switch(options.accept){ + case 'file': //一般文件 + if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){ + that.msg('选择的文件中包含不支持的格式'); + return elemFile.value = ''; + } + break; + case 'video': //视频文件 + if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){ + that.msg('选择的视频中包含不支持的格式'); + return elemFile.value = ''; + } + break; + case 'audio': //音频文件 + if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){ + that.msg('选择的音频中包含不支持的格式'); + return elemFile.value = ''; + } + break; + default: //图片文件 + layui.each(value, function(i, item){ + if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){ + check = true; + } + }); + if(check){ + that.msg('选择的图片中包含不支持的格式'); + return elemFile.value = ''; + } + break; + } + + //检验文件数量 + that.fileLength = function(){ + var length = 0 + ,items = files || that.files || that.chooseFiles || elemFile.files; + layui.each(items, function(){ + length++; + }); + return length; + }(); + if(options.number && that.fileLength > options.number){ + return that.msg('同时最多只能上传的数量为：'+ options.number); + } + + //检验文件大小 + if(options.size > 0 && !(device.ie && device.ie < 10)){ + var limitSize; + + layui.each(that.chooseFiles, function(index, file){ + if(file.size > 1024*options.size){ + var size = options.size/1024; + size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB' + elemFile.value = ''; + limitSize = size; + } + }); + if(limitSize) return that.msg('文件不能超过'+ limitSize); + } + send(); + }; + + //重置方法 + Class.prototype.reload = function(options){ + options = options || {}; + delete options.elem; + delete options.bindAction; + + var that = this + ,options = that.config = $.extend({}, that.config, upload.config, options) + ,next = options.elem.next(); + + //更新文件域相关属性 + next.attr({ + name: options.name + ,accept: options.acceptMime + ,multiple: options.multiple + }); + }; + + //事件处理 + Class.prototype.events = function(){ + var that = this + ,options = that.config + + //设置当前选择的文件队列 + ,setChooseFile = function(files){ + that.chooseFiles = {}; + layui.each(files, function(i, item){ + var time = new Date().getTime(); + that.chooseFiles[time + '-' + i] = item; + }); + } + + //设置选择的文本 + ,setChooseText = function(files, filename){ + var elemFile = that.elemFile + ,item = options.item ? options.item : options.elem + ,value = files.length > 1 + ? files.length + '个文件' + : ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || ''); + + if(elemFile.next().hasClass(ELEM_CHOOSE)){ + elemFile.next().remove(); + } + that.upload(null, 'choose'); + if(that.isFile() || options.choose) return; + elemFile.after(''+ value +''); + }; + + //点击上传容器 + options.elem.off('upload.start').on('upload.start', function(){ + var othis = $(this), data = othis.attr('lay-data'); + + if(data){ + try{ + data = new Function('return '+ data)(); + that.config = $.extend({}, options, data); + } catch(e){ + hint.error('Upload element property lay-data configuration item has a syntax error: ' + data) + } + } + + that.config.item = othis; + that.elemFile[0].click(); + }); + + //拖拽上传 + if(!(device.ie && device.ie < 10)){ + options.elem.off('upload.over').on('upload.over', function(){ + var othis = $(this) + othis.attr('lay-over', ''); + }) + .off('upload.leave').on('upload.leave', function(){ + var othis = $(this) + othis.removeAttr('lay-over'); + }) + .off('upload.drop').on('upload.drop', function(e, param){ + var othis = $(this), files = param.originalEvent.dataTransfer.files || []; + + othis.removeAttr('lay-over'); + setChooseFile(files); + + if(options.auto){ + that.upload(files); + } else { + setChooseText(files); + } + }); + } + + //文件选择 + that.elemFile.off('upload.change').on('upload.change', function(){ + var files = this.files || []; + setChooseFile(files); + options.auto ? that.upload() : setChooseText(files); //是否自动触发上传 + }); + + //手动触发上传 + options.bindAction.off('upload.action').on('upload.action', function(){ + that.upload(); + }); + + //防止事件重复绑定 + if(options.elem.data('haveEvents')) return; + + that.elemFile.on('change', function(){ + $(this).trigger('upload.change'); + }); + + options.elem.on('click', function(){ + if(that.isFile()) return; + $(this).trigger('upload.start'); + }); + + if(options.drag){ + options.elem.on('dragover', function(e){ + e.preventDefault(); + $(this).trigger('upload.over'); + }).on('dragleave', function(e){ + $(this).trigger('upload.leave'); + }).on('drop', function(e){ + e.preventDefault(); + $(this).trigger('upload.drop', e); + }); + } + + options.bindAction.on('click', function(){ + $(this).trigger('upload.action'); + }); + + options.elem.data('haveEvents', true); + }; + + //核心入口 + upload.render = function(options){ + var inst = new Class(options); + return thisUpload.call(inst); + }; + + exports(MOD_NAME, upload); + }); \ No newline at end of file From 969663894d8db91c185d5d9b6af69bf3f9c136a5 Mon Sep 17 00:00:00 2001 From: lockingreal <1191515088@qq,com> Date: Sat, 26 Mar 2022 16:26:42 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20upload=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/upload/layui-upload.js | 563 --------------------------- 1 file changed, 563 deletions(-) delete mode 100644 src/component/upload/layui-upload.js diff --git a/src/component/upload/layui-upload.js b/src/component/upload/layui-upload.js deleted file mode 100644 index b99b240b..00000000 --- a/src/component/upload/layui-upload.js +++ /dev/null @@ -1,563 +0,0 @@ -/*! - * upload 文件上传组件 - * MIT Licensed - */ - -layui.define('layer' , function(exports){ - "use strict"; - - var $ = layui.$ - ,layer = layui.layer - ,hint = layui.hint() - ,device = layui.device() - - //外部接口 - ,upload = { - config: {} //全局配置项 - - //设置全局项 - ,set: function(options){ - var that = this; - that.config = $.extend({}, that.config, options); - return that; - } - - //事件 - ,on: function(events, callback){ - return layui.onevent.call(this, MOD_NAME, events, callback); - } - } - - //操作当前实例 - ,thisUpload = function(){ - var that = this; - return { - upload: function(files){ - that.upload.call(that, files); - } - ,reload: function(options){ - that.reload.call(that, options); - } - ,config: that.config - } - } - - //字符常量 - ,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' - - ,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag' - - - //构造器 - ,Class = function(options){ - var that = this; - that.config = $.extend({}, that.config, upload.config, options); - that.render(); - }; - - //默认配置 - Class.prototype.config = { - accept: 'images' //允许上传的文件类型：images/file/video/audio - ,exts: '' //允许上传的文件后缀名 - ,auto: true //是否选完文件后自动上传 - ,bindAction: '' //手动上传触发的元素 - ,url: '' //上传地址 - ,field: 'file' //文件字段名 - ,acceptMime: '' //筛选出的文件类型，默认为所有文件 - ,method: 'post' //请求上传的 http 类型 - ,data: {} //请求上传的额外参数 - ,drag: true //是否允许拖拽上传 - ,size: 0 //文件限制大小，默认不限制 - ,number: 0 //允许同时上传的文件数，默认不限制 - ,multiple: false //是否允许多文件上传，不支持ie8-9 - }; - - //初始渲染 - Class.prototype.render = function(options){ - var that = this - ,options = that.config; - - options.elem = $(options.elem); - options.bindAction = $(options.bindAction); - - that.file(); - that.events(); - }; - - //追加文件域 - Class.prototype.file = function(){ - var that = this - ,options = that.config - ,elemFile = that.elemFile = $([ - '' - ].join('')) - ,next = options.elem.next(); - - if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){ - next.remove(); - } - - //包裹ie8/9容器 - if(device.ie && device.ie < 10){ - options.elem.wrap('
'); - } - - that.isFile() ? ( - that.elemFile = options.elem - ,options.field = options.elem[0].name - ) : options.elem.after(elemFile); - - //初始化ie8/9的Form域 - if(device.ie && device.ie < 10){ - that.initIE(); - } - }; - - //ie8-9初始化 - Class.prototype.initIE = function(){ - var that = this - ,options = that.config - ,iframe = $('') - ,elemForm = $(['
' - ,'
'].join('')); - - //插入iframe - $('#'+ ELEM_IFRAME)[0] || $('body').append(iframe); - - //包裹文件域 - if(!options.elem.next().hasClass(ELEM_FORM)){ - that.elemFile.wrap(elemForm); - - //追加额外的参数 - options.elem.next('.'+ ELEM_FORM).append(function(){ - var arr = []; - layui.each(options.data, function(key, value){ - value = typeof value === 'function' ? value() : value; - arr.push('') - }); - return arr.join(''); - }()); - } - }; - - //异常提示 - Class.prototype.msg = function(content){ - return layer.msg(content, { - icon: 2 - ,shift: 6 - }); - }; - - //判断绑定元素是否为文件域本身 - Class.prototype.isFile = function(){ - var elem = this.config.elem[0]; - if(!elem) return; - return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file' - } - - //预读图片信息 - Class.prototype.preview = function(callback){ - var that = this; - if(window.FileReader){ - layui.each(that.chooseFiles, function(index, file){ - var reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = function(){ - callback && callback(index, file, this.result); - } - }); - } - }; - - //执行上传 - Class.prototype.upload = function(files, type){ - var that = this - ,options = that.config - ,elemFile = that.elemFile[0] - - //高级浏览器处理方式，支持跨域 - ,ajaxSend = function(){ - var successful = 0, aborted = 0 - ,items = files || that.files || that.chooseFiles || elemFile.files - ,allDone = function(){ //多文件全部上传完毕的回调 - if(options.multiple && successful + aborted === that.fileLength){ - typeof options.allDone === 'function' && options.allDone({ - total: that.fileLength - ,successful: successful - ,aborted: aborted - }); - } - }; - layui.each(items, function(index, file){ - var formData = new FormData(); - - formData.append(options.field, file); - - //追加额外的参数 - layui.each(options.data, function(key, value){ - value = typeof value === 'function' ? value() : value; - formData.append(key, value); - }); - - //提交文件 - var opts = { - url: options.url - ,type: 'post' //统一采用 post 上传 - ,data: formData - ,contentType: false - ,processData: false - ,dataType: 'json' - ,headers: options.headers || {} - //成功回调 - ,success: function(res){ - successful++; - done(index, res); - allDone(); - } - //异常回调 - ,error: function(){ - aborted++; - that.msg('请求上传接口出现异常'); - error(index); - allDone(); - } - }; - //进度条 - if(typeof options.progress === 'function'){ - opts.xhr = function(){ - var xhr = $.ajaxSettings.xhr(); - //上传进度 - xhr.upload.addEventListener("progress", function (obj) { - if(obj.lengthComputable){ - var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比 - options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index); - } - }); - return xhr; - } - } - $.ajax(opts); - }); - } - - //低版本IE处理方式，不支持跨域 - ,iframeSend = function(){ - var iframe = $('#'+ ELEM_IFRAME); - - that.elemFile.parent().submit(); - - //获取响应信息 - clearInterval(Class.timer); - Class.timer = setInterval(function() { - var res, iframeBody = iframe.contents().find('body'); - try { - res = iframeBody.text(); - } catch(e) { - that.msg('获取上传后的响应信息出现异常'); - clearInterval(Class.timer); - error(); - } - if(res){ - clearInterval(Class.timer); - iframeBody.html(''); - done(0, res); - } - }, 30); - } - - //统一回调 - ,done = function(index, res){ - that.elemFile.next('.'+ ELEM_CHOOSE).remove(); - elemFile.value = ''; - if(typeof res !== 'object'){ - try { - res = JSON.parse(res); - } catch(e){ - res = {}; - return that.msg('请对上传接口返回有效JSON'); - } - } - typeof options.done === 'function' && options.done(res, index || 0, function(files){ - that.upload(files); - }); - } - - //统一网络异常回调 - ,error = function(index){ - if(options.auto){ - elemFile.value = ''; - } - typeof options.error === 'function' && options.error(index || 0, function(files){ - that.upload(files); - }); - } - - ,exts = options.exts - ,check ,value = function(){ - var arr = []; - layui.each(files || that.chooseFiles, function(i, item){ - arr.push(item.name); - }); - return arr; - }() - - //回调返回的参数 - ,args = { - //预览 - preview: function(callback){ - that.preview(callback); - } - //上传 - ,upload: function(index, file){ - var thisFile = {}; - thisFile[index] = file; - that.upload(thisFile); - } - //追加文件到队列 - ,pushFile: function(){ - that.files = that.files || {}; - layui.each(that.chooseFiles, function(index, item){ - that.files[index] = item; - }); - return that.files; - } - //重置文件 - ,resetFile: function(index, file, filename){ - var newFile = new File([file], filename); - that.files = that.files || {}; - that.files[index] = newFile; - } - } - - //提交上传 - ,send = function(){ - //选择文件的回调 - if(type === 'choose' || options.auto){ - options.choose && options.choose(args); - if(type === 'choose'){ - return; - } - } - - //上传前的回调 - 如果回调函数明确返回false，则停止上传(#pulls55) - if(options.before && (options.before(args) === false)) return; - - //IE兼容处理 - if(device.ie){ - return device.ie > 9 ? ajaxSend() : iframeSend(); - } - - ajaxSend(); - } - - //校验文件格式 - value = value.length === 0 - ? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '') - : value; - - if(value.length === 0) return; - - switch(options.accept){ - case 'file': //一般文件 - if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){ - that.msg('选择的文件中包含不支持的格式'); - return elemFile.value = ''; - } - break; - case 'video': //视频文件 - if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){ - that.msg('选择的视频中包含不支持的格式'); - return elemFile.value = ''; - } - break; - case 'audio': //音频文件 - if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){ - that.msg('选择的音频中包含不支持的格式'); - return elemFile.value = ''; - } - break; - default: //图片文件 - layui.each(value, function(i, item){ - if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){ - check = true; - } - }); - if(check){ - that.msg('选择的图片中包含不支持的格式'); - return elemFile.value = ''; - } - break; - } - - //检验文件数量 - that.fileLength = function(){ - var length = 0 - ,items = files || that.files || that.chooseFiles || elemFile.files; - layui.each(items, function(){ - length++; - }); - return length; - }(); - if(options.number && that.fileLength > options.number){ - return that.msg('同时最多只能上传的数量为：'+ options.number); - } - - //检验文件大小 - if(options.size > 0 && !(device.ie && device.ie < 10)){ - var limitSize; - - layui.each(that.chooseFiles, function(index, file){ - if(file.size > 1024*options.size){ - var size = options.size/1024; - size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB' - elemFile.value = ''; - limitSize = size; - } - }); - if(limitSize) return that.msg('文件不能超过'+ limitSize); - } - send(); - }; - - //重置方法 - Class.prototype.reload = function(options){ - options = options || {}; - delete options.elem; - delete options.bindAction; - - var that = this - ,options = that.config = $.extend({}, that.config, upload.config, options) - ,next = options.elem.next(); - - //更新文件域相关属性 - next.attr({ - name: options.name - ,accept: options.acceptMime - ,multiple: options.multiple - }); - }; - - //事件处理 - Class.prototype.events = function(){ - var that = this - ,options = that.config - - //设置当前选择的文件队列 - ,setChooseFile = function(files){ - that.chooseFiles = {}; - layui.each(files, function(i, item){ - var time = new Date().getTime(); - that.chooseFiles[time + '-' + i] = item; - }); - } - - //设置选择的文本 - ,setChooseText = function(files, filename){ - var elemFile = that.elemFile - ,item = options.item ? options.item : options.elem - ,value = files.length > 1 - ? files.length + '个文件' - : ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || ''); - - if(elemFile.next().hasClass(ELEM_CHOOSE)){ - elemFile.next().remove(); - } - that.upload(null, 'choose'); - if(that.isFile() || options.choose) return; - elemFile.after(''+ value +''); - }; - - //点击上传容器 - options.elem.off('upload.start').on('upload.start', function(){ - var othis = $(this), data = othis.attr('lay-data'); - - if(data){ - try{ - data = new Function('return '+ data)(); - that.config = $.extend({}, options, data); - } catch(e){ - hint.error('Upload element property lay-data configuration item has a syntax error: ' + data) - } - } - - that.config.item = othis; - that.elemFile[0].click(); - }); - - //拖拽上传 - if(!(device.ie && device.ie < 10)){ - options.elem.off('upload.over').on('upload.over', function(){ - var othis = $(this) - othis.attr('lay-over', ''); - }) - .off('upload.leave').on('upload.leave', function(){ - var othis = $(this) - othis.removeAttr('lay-over'); - }) - .off('upload.drop').on('upload.drop', function(e, param){ - var othis = $(this), files = param.originalEvent.dataTransfer.files || []; - - othis.removeAttr('lay-over'); - setChooseFile(files); - - if(options.auto){ - that.upload(files); - } else { - setChooseText(files); - } - }); - } - - //文件选择 - that.elemFile.off('upload.change').on('upload.change', function(){ - var files = this.files || []; - setChooseFile(files); - options.auto ? that.upload() : setChooseText(files); //是否自动触发上传 - }); - - //手动触发上传 - options.bindAction.off('upload.action').on('upload.action', function(){ - that.upload(); - }); - - //防止事件重复绑定 - if(options.elem.data('haveEvents')) return; - - that.elemFile.on('change', function(){ - $(this).trigger('upload.change'); - }); - - options.elem.on('click', function(){ - if(that.isFile()) return; - $(this).trigger('upload.start'); - }); - - if(options.drag){ - options.elem.on('dragover', function(e){ - e.preventDefault(); - $(this).trigger('upload.over'); - }).on('dragleave', function(e){ - $(this).trigger('upload.leave'); - }).on('drop', function(e){ - e.preventDefault(); - $(this).trigger('upload.drop', e); - }); - } - - options.bindAction.on('click', function(){ - $(this).trigger('upload.action'); - }); - - options.elem.data('haveEvents', true); - }; - - //核心入口 - upload.render = function(options){ - var inst = new Class(options); - return thisUpload.call(inst); - }; - - exports(MOD_NAME, upload); - }); \ No newline at end of file From 0495d20af0ea035ea71c630a706a6b267f8a6e71 Mon Sep 17 00:00:00 2001 From: lockingreal <1191515088@qq.com> Date: Sun, 27 Mar 2022 12:45:45 +0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E6=8F=90?= =?UTF-8?q?=E4=BA=A4=E9=82=AE=E7=AE=B1=E9=82=AE=E7=AE=B1=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit gitee提交的邮箱与绑定邮箱不一致导致头像显示有误 --- src/component/upload/index.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/component/upload/index.vue b/src/component/upload/index.vue index cff148a5..7312e6a9 100644 --- a/src/component/upload/index.vue +++ b/src/component/upload/index.vue @@ -120,14 +120,10 @@ const uploadDragOver = (e: any) => { //console.log("uploadDrag9ikme",e); }; const uploadDragDrop = (e: any) => { - console.log("uploadDragDrop", e); isDragEnter.value = false; }; -const uploadDragStop = (e: any) => { - console.log("uploadDragStop", e); -}; +const uploadDragStop = (e: any) => {}; const uploadDragEnter = (e: any) => { - console.log("", e); isDragEnter.value = true; }; const uploadDragLeave = (e: any) => {