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上传文件
964 0
|
存储 前端开发 Java
Element-UI中el-upload上传组件(demo详解)
案例详解Element-UI中el-upload上传组件,一起打卡学习吧!
1412 0
Element-UI中el-upload上传组件(demo详解)
|
JSON 数据格式 内存技术
给layui的upload加了文件大小限制
/*! @Title: layui.upload 单文件上传 - 全浏览器兼容版 @Author: 贤心 @License:MIT */ layui.
6236 0
|
1月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
1月前
|
Java Spring
DWR上传文件提示File uploads not supported
确保你的DWR配置和代码都正确地支持文件上传,以解决"DWR上传文件提示File uploads not supported" 错误。
17 0
|
1月前
|
移动开发 JavaScript 小程序
uView Upload 上传
uView Upload 上传
30 0
|
1月前
form-data 与 x-www-form-urlencode有何区别?
在客户端和服务器之间传递数据既可以使用`form-data` ,又可以使用 `x-www-form-urlencoded` 。但是在使用时你有注意它们的区别吗?
|
10月前
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
227 0
|
1月前
element el-upload上传图片完成后隐藏上传
element el-upload上传图片完成后隐藏上传
122 0
|
SQL 存储 安全
浅谈 SESSION_UPLOAD_PROGRESS 的利用(二)
浅谈 SESSION_UPLOAD_PROGRESS 的利用
150 0
浅谈 SESSION_UPLOAD_PROGRESS 的利用(二)