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;
    },

  

posted @   专注网站建设和推广  阅读(1581)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示