el-upload中的before-upload不生效

简介: el-upload中的before-upload不生效

我们先来看看官方对before-upload的定义

before-upload是在上传文件时触发,不是添加文件时触发,添加文件时触发 on-change

所以如果我们要在添加文件时,对文件的大小和后缀等等进行判断,可以用 on-change 方法来实现

    checkSuffix(str) {
      var strRegex = /\.(jpg|png|gif|bmp|jpeg)$/
      if (strRegex.test(str.toLowerCase())) {
        return true
      } else {
        return false
      }
    },
 
    onChange(file) {
      // 限制图片大小
      if (file.size / 1024 / 1024 > 3) {
        this.$message.warning('文件大小不得超过3M,请重新上传')
        this.fileList.pop()
      }
      // 对文件后缀进行限制
      const index = file.name.lastIndexOf('.')
      const suffix = file.name.substring(index, file.name.length)
      console.log('suffix', suffix)
      if (!this.checkSuffix(suffix)) {
        this.$message.warning(
          '请上传扩展名为:.rar .zip .doc .docx .pdf .jpg 的文件'
        )
        this.fileList.pop()
      }
    },


相关文章
|
JavaScript 前端开发
el-upload上传文件
el-upload上传文件
1044 0
|
JSON 数据格式 内存技术
给layui的upload加了文件大小限制
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */ layui.
6302 0
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1572 0
Element-UI中el-upload上传组件(demo详解)
|
5月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
5月前
|
安全 PHP
文件上传--Upload-labs--Pass19--move_upload_file()函数特性
文件上传--Upload-labs--Pass19--move_upload_file()函数特性
|
5月前
|
JavaScript 前端开发
vue element plus Upload 上传
vue element plus Upload 上传
128 0
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
370 0
|
5月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
260 0
element使用el-upload组件实现自定义方法上传图片或者文件
element使用el-upload组件实现自定义方法上传图片或者文件
237 0
|
SQL 存储 安全
浅谈 SESSION_UPLOAD_PROGRESS 的利用(二)
浅谈 SESSION_UPLOAD_PROGRESS 的利用
187 0
浅谈 SESSION_UPLOAD_PROGRESS 的利用(二)