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()
      }
    },


相关文章
|
XML JSON 数据处理
postman 中 body的form-data,x-www-form-urlencoded,raw,binary含义
postman 中 body的form-data,x-www-form-urlencoded,raw,binary含义
499 0
postman 中 body的form-data,x-www-form-urlencoded,raw,binary含义
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3714 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
4月前
|
JavaScript 前端开发 安全
document.domain 与 window.location
document.domain 与 window.location
|
6月前
解决ERROR in Conflict: Multiple assets emit different content to the same filename index.html 的问题
解决ERROR in Conflict: Multiple assets emit different content to the same filename index.html 的问题
426 0
|
6月前
form-data 与 x-www-form-urlencode有何区别?
在客户端和服务器之间传递数据既可以使用`form-data` ,又可以使用 `x-www-form-urlencoded` 。但是在使用时你有注意它们的区别吗?
293 2
|
6月前
|
前端开发 安全 JavaScript
x-www-form-urlencoded 是什么?
在开发网站时,我们常常需要将用户填写的表单信息发送给服务器,而其中一种被广泛接受和使用的方法是使用 application/x-www-form-urlencoded 编码格式。本篇文章旨在探讨该编码格式的细节和应用场景,帮助开发者更有效地管理和发送表单数据。
head 插件 Content-Type header [application/x-www-form-urlencoded] is not supported
head 插件 Content-Type header [application/x-www-form-urlencoded] is not supported
133 1
|
3月前
|
前端开发 虚拟化
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
1076 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
|
4月前
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
1231 0