最近的项目涉及到很多文件上传，然后对文件上传有很多限制。例如文件大小限制、文件数量限制、文件类型限制、文件上传后列表样式自定义，包括上传进度条等问题。下面是我对element-ui上传组件的一些修改，点击查看源码。我自己维护一个列表数据，然后对这个列表数据进行一些操作，这个组件本身是没有自带的。先看我的组件模板Uploadlimit：限制文件数量动作：文件的上传地址（我这里没有具体封装axios，直接用默认的）accept：接受上传的文件类型（字符串）data：上传附加的附加参数multiple：多选（布尔型，我设置的这里为true，即可以批量上传）show-file-list：是否显示文件上传列表with-credentials：是否携带cookie，布尔型，true表示携带这些是一些初始值我设置。下面最重要的是hook函数1.handleExceed是文件数量超过限制时HookprivatehandleExceed(files:any,fileList:any){if(fileList.length>20){this.$message.error('最多允许上传20个文件');返回假；}}2、文件上传前的handleBeforeUploadhook，可以做一些拦截，返回false，停止上传privatehandleeBeforeUpload(file:any){//文件大小限制constisLt5M=file.size/1024/1024<5;if(!isLt5M){this.$message.error('不得超过5M');回报是Lt5M；}//文件类型限制constname=file.name?文件名：'';constext=名字?name.substr(name.lastIndexOf('.')+1,name.length):true;constisExt=这个。accept.indexOf(ext)<0;if(isExt){this.$message.error('请上传正确的格式类型');返回！isExt；}//大小和类型校验通过后，给自定义列表添加需要的数据this.objAddItem(this.tempArr,file);}3.文件上传时的handleProgresshook，更新进度条的值privatehandleProgress(event:any,file:any,fileList:any){this.tempArr.forEach((element:any,index:number)=>{if(element.uid===file.uid){//更新这个uid的进度constprogress=Math.floor(event.percent);//防止上传接口返回成功值，所以这里给的progress最大值为99，然后在成功钩子里设置为100element.progress=progress===100?99:progress;this.$set(this.tempArr,索引,元素);this.$emit('changeFileList',this.tempArr);}});}4、文件上传成功时handleSuccesshookprivatehandleSuccess(response:any,file:any,fileList:any){this.tempArr.forEach((element:any,index:number)=>{if(element.uid===file.uid){element.progress=100;//element.url为下载地址，一般后台人员会返回给你//这里为了做后续下载，先写死链接用于测试element.url='http://originoo-1.b0.upaiyun.com/freepic/3226433.jpg!freethumb';this.$message.success('文件上传成功');this.$set(this.tempArr,index,element);this.$emit('changeFileList',this.tempArr);}});//response是后台接口返回的数据，可以根据接口返回的数据做一些操作//例子//constbizCode=response.rspResult.bizCode;//switch(bizCode){//case200://this.tempArr.forEach((element:any,index:number)=>{//if(element.uid===file.uid){//元素.progress=100;//element.url=response.data.url;//这是后台小哥返回给我的下载地址//this.$message.success('文件上传成功');//this.$set(this.tempArr,index,element);//this.$emit('changeFileList',this.tempArr);//}//});//休息;//默认：//this.tempArr.forEach((element:any,index:number)=>{//if(element.uid===file.uid){//this.tempArr.splice(index,1);//上传失败删除记录//this.$message.error('文件上传失败');//this.$emit('changeFileList',this.tempArr);//}//});//休息;//}}5.文件上传失败时的handleErrorhookprivatehandleError(err:any,file:any,fileList:any){this.tempArr.forEach((element:any,index:number)=>{if(element.uid===file.uid){this.tempArr.splice(index,1);//上传失败删除记录this.$message.error('fileUploadfailed');this.$emit('changeFileList',这个.tempArr);}});}添加数据函数privateobjAddItem(tempArr:any[],file:any){consttempObj={uid:file.uid,//uid用于标识文件originalName:file.name,//列表中显示的文件名progress:0,//进度条码:200,//上传状态};tempArr.push(tempObj);this.$emit('changeFileList',tempArr);}上传文件下载包privatedownloadFileFun(url:any){constiframe:any=document.createElement('iframe')asHTMLIFrameElement;iframe.style.display='无';//防止影响页面iframe.style.height=0;//防止影响页面iframe.src=url;document.body.appendChild(iframe);//这一行必须挂在dom树上才会发送请求//5分钟后删除（onload方法对下载链接不起作用，先来看看）setTimeout(()=>{iframe.remove();},5*60*1000);}继续更新......
