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上传文件
1078 0
|
前端开发 JavaScript
Bootstrap File Input,最好用的文件上传组件(1)
Bootstrap File Input,最好用的文件上传组件
630 0
Bootstrap File Input,最好用的文件上传组件(1)
|
JSON 数据格式 内存技术
给layui的upload加了文件大小限制
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */ layui.
6334 0
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1612 0
Element-UI中el-upload上传组件(demo详解)
|
6月前
|
安全 PHP
文件上传--Upload-labs--Pass19--move_upload_file()函数特性
文件上传--Upload-labs--Pass19--move_upload_file()函数特性
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
400 0
|
6月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
310 0
element使用el-upload组件实现自定义方法上传图片或者文件
element使用el-upload组件实现自定义方法上传图片或者文件
266 0
|
PHP
【PHP工具类】Upload
【PHP工具类】Upload
89 0
|
前端开发 程序员 内存技术
Bootstrap File Input,最好用的文件上传组件(2)
Bootstrap File Input,最好用的文件上传组件
279 0
Bootstrap File Input,最好用的文件上传组件(2)