elementui文件(图片)上传组件对图片大小和类型进行判断限制
1,先在el-upload设置accept属性,限定文件类型
<el-upload accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF" >
但这样做只能限制上传文件时打开的文件上传对话框右下角默认文件类型为指定类型,实际上用户还是可以在上传对话框右下角选则“全部文件”
2,给<el-upload>绑定:before-upload="beforeUpload" (before-upload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传)
<el-upload :before-upload="beforeUpload" accept=".jpg,.jpeg,.png,.gif.JPG,.JPEG,.PNG,.GIF" >
3,beforeUpload函数代码(判断和限制文件类型,限制文件大小):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 上传文件之前对文件大小和类型做限制,官方自带accept属性还是可以选中全部文件 beforeUpload(file) { let types = [ 'image/jpeg' , 'image/jpg' , 'image/gif' , 'image/bmp' , 'image/png' ]; const isImage = types.includes(file.type); const isLtSize = file.size / 1024 / 1024 < 2; if (!isImage) { this .$message.error( '上传图片只能是 JPG、JPEG、gif、bmp、PNG 格式!' ); return false ; } if (!isLtSize) { this .$message.error( '上传图片大小不能超过 2MB!' ); return false ; } return true ; }, |
分类:
elementUI
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY