Vue实现附件上传功能
本文实例为大家分享了Vue实现附件上传的具体代码,供大家参考,具体内容如下
前言
前端UI是用的是element-ui的上传功能
本文主要记录下代码,方便下次复制粘贴
前端部分
HTML
- limit:限制文件个数1个
- on-remove:移除附件时的钩子函数,主要就console输出下
- on-error:用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待
- file-list:绑定附件
- auto-upload:禁止自动上传,true的话选了文件就自动上传
- http-request:自定义上传文件请求方法,默认方法会与mock产生XmlRequest重新生成导致找不到文件问题,我注释了mock还是那样,没具体研究
- action:原上传文件的路径,由于使用了自定义上传文件请求,即http-request,因此这个字段随便写就好,不写不行好像
选取文件 支持上传{{strRebuild(fileType)}}格式,且不超过{{fileSize}}M
JS
import{strRebuild,lastSubstring}from'@/utils/strUtil' import{message}from'@/utils/message' exportdefault{ data(){ return{ //附件列表 fileList:[], //允许的文件类型 fileType:['xls','xlsx','pdf','doc','docx','txt','jpg','png','jpeg'], //运行上传文件大小,单位M fileSize:10, } }, methods:{ //清空表单 clear(){ //清空附件 this.$refs.upload.clearFiles() }, //附件检查 //检查附件是否属于可上传类型 //检查附件是否超过限制大小 checkFile(){ varflag=true vartip='' varfiles=this.$refs.upload.uploadFiles files.forEach(item=>{ //文件过大 if(item.size>this.fileSize*1024*1024){ flag=false tip='文件超过'+this.fileSize+'M' } //文件类型不属于可上传的类型 if(!this.fileType.includes(lastSubstring(item.name,'.'))){ flag=false tip='文件类型不可上传' } }) if(!flag){ message('error',tip) } returnflag }, //提交附件 submitUpload(){ if(this.checkFile()){ console.log('上传附件...') this.$refs.upload.submit() }else{ console.log('取消上传') } }, //自定义文件上传方法 uploadFile(file){ //把文件放入FormData进行提交 constparam=newFormData() param.append('files',file.file) uploadFile(param).then(response=>{ //TODO一些关闭弹框,上传成功提示等 }) }, //移除附件 handleRemove(file,fileList){ console.log('移除附件...') }, //附件上传失败,打印下失败原因 onError(err){ message('error','附件上传失败') console.log(err) }, //字符串重组 strRebuild(str){ returnstrRebuild(str) } } }
工具类JS
strUtil.js
//字符串相关工具类 //数组根据分隔符重组为字符串 exportfunctionstrRebuild(arr,split){ if(arr===undefined||arr===null||!(arrinstanceofArray)||arr.length===0){ return'' } if(split===undefined||split===null){ split=',' } varstr='' arr.forEach((v,i)=>{ if(i===arr.length-1){ str=str+v }else{ str=str+v+split } }) returnstr } //截取最后一个特定字符后面的字符串 exportfunctionlastSubstring(str,split){ if(str===undefined||str===null||split===undefined||split===null){ return'' } returnstr.substring(str.lastIndexOf(split)+1) }
message.js
import{Message}from'element-ui' //提示封装type提示类型,msg提示信息,duration持续时间 exportfunctionmessage(type,msg,duration){ Message({ message:msg||'success', type:type||'success', duration:duration||5*1000 }) } //带删除键提示,duration为0时,不会自动消失 //提示封装type提示类型,msg提示信息,duration持续时间 exportfunctionmessageShowClose(type,msg,duration){ Message({ message:msg||'success', type:type||'success', duration:duration||0, showClose:true }) }
API
//附件上传 exportfunctionuploadFile(file){ returnrequest({ url:'/uploadFile', method:'post', headers:{ 'Content-Type':'multipart/form-data;charset=utf-8' }, data:file }) }
后端接口
/** *单文件上传 *@paramfiles接收文件要以数组接收 *@return */ @PostMapping(value="/uploadFile") publicvoiduploadFile(@RequestBodyMultipartFile[]files){ //TODO }
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。