首页 > 编程知识 正文

element-ui upload组件 上传文件类型及文件大小限制

时间:2023-05-03 20:48:16 阅读:261228 作者:2583

<el-upload class="c-upload" ref="upload" :action="actions" :headers="myHeaders" :data="myData" :limit='limit' accept=".xls,.xlsx" :on-exceed="onExceed" :on-change="onChange" :on-success="onSuccess" :on-error="onError" :file-list="fileList" :before-upload="beforeUpload" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary" >选取文件</el-button> <div slot="tip" class="el-upload__tip" >只能上传xls/xlsx文件,且不超过一个</div></el-upload>

如果限制只能上传1个文件,可以把limit设置为1就行,也可以在on-change方法中设置,需要显示几个根据需求来设置

onChange(file, fileList) {// 通过这个判断截取长度 if (fileList.length > 1) { fileList.splice(0, 1) } },

限制文件类型,通过上传之前的钩子:before-upload="beforeUpload"
限制文件大小,就是里面注释的部分

beforeUpload(file) { var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'xls' const extension2 = testmsg === 'xlsx' // const isLt2M = file.size / 1024 / 1024 < 10 if(!extension && !extension2) { this.$message({ message: '上传文件只能是 xls、xlsx格式!', type: 'warning' }); } // 也可以在这里增加文件大小限制 // if(!isLt2M) { // this.$message({ // message: '上传文件大小不能超过 10MB!', // type: 'warning' // }); // } // return (extension || extension2) && isLt2M return extension || extension2 },

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。