elementUI 的文件上传支持word、Excel文件,且做了文件类型和大小的限制(多文件上传)
使用elementUI 制作多文件上做了文件类型校验此段代码只支持.doc、.docx、.xls、.xlsx文件,且文件上传大小设置的200M哦,且文件上传个数为5个。
想要上传其他类型的文件只需要修改accept属性中的文件类型和beforeUpload方法中的文件类型校验即可
accept属性设置了,用户在选择文件是就只能看见此类型的文件,当然为了防止***钻用户选择所有文件类型选项,所以我们要在beforeUpload中去做文件类型的校验
beforeUpload这个方法是做什么的呢,(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传)详情参看elementUI官网
limit属性设置文件上传个数
在做多文件上传时注意:
在循环追加列表时,不要使用forEach,可以使用map ,如果你偏要使用forEach ,你会发现有神奇的事情发生,呵呵,代码中有哦,你可以打开注释试试看哦。(forEach和map的区别)
样式就不给了哈,自己画就好了,废话不多说直接上代码:
1、html:
<el-upload class="upload-demo" drag action="#" multiple show-file-list accept=".doc,.docx,.xls,.xlsx" :before-upload="beforeUpload" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-change="(file,fileList)=>changeHander(file,fileList)" :limit="5" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或点击上传</div> <div class="el-upload__tip uploadeMax" >支持上传后缀为:.doc、.docx、.xls、.xlsx文件,且不超过200M</div> <div class="el-upload__tip uploadeError" >Excel文件单元格内容避免使用"=" "+" "-" 或@开头,以免下载查看时,造成命令注入风险</div> </el-upload> <div class="group-botton"> <el-button plain>返回</el-button> <el-button plain @click="submitUpload">提交</el-button>
2、逻辑:
beforeUpload(file){ console.log(file) // 文件类型校验 var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1); const extension = testmsg === "doc"|| testmsg === "docx" || testmsg === "xls" || testmsg === "xlsx" ; if (!extension ) { this.$message({ message: "上传文件只能是.doc、.docx、.xls、.xlsx格式!", type: "warning", }); // 文件大小校验 let size200M = file.size / 1024 / 1024 < 200 if(!size200M){ this.$message.warning('上传大小不能超过200M!') return false } } return extension; }, // 点击提交按钮文件上传 submitUpload() { if(this.fileList.length !=0){ let formData = new FormData(); // 错误的例子(不能使用forEach) // this.fileList.forEach((val,index)=>{ // formData.append("multipaartFiles",val.raw) // console.log(val,index) // }); // formData.append("file",this.fileList[0].raw) this.fileList.map((item,index)=>{ formData.append('file',item.raw); })
//打印formData中的数据 // for(var [a,b]of formData.entries()){ // console.log(a,b,'++++++++++++++') // } // console.log(formData,'formData'); axios({ url:'后端的接口地址', method: 'post', data:formData, headers:{ 'Content-type':'multipart/form-data' } }).then( res=>{ console.log(res,'res') if(res.status==200){ this.fileList=[]; this.$message({ showClose: true, type:'success', message:'上传成功' }) }else{ this.$message({ type:"error", message:res.data, show:true }) } }) }else{ this.$message({type:'error',message:'您还没有上传文件,请去上传文件吧'}) } this.$refs.upload.submit(); },