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 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
4004 0
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
JavaScript 前端开发
Element_文件上传&&多个文件上传
Element_文件上传&&多个文件上传
1529 0
|
JavaScript 前端开发 数据安全/隐私保护
Vue如何实现权限管理(动态路由addRoutes)
Vue如何实现权限管理(动态路由addRoutes)
1195 1
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
3955 0
el-input限制输入整数等分析
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
5363 0
|
资源调度 JavaScript 前端开发
vue2_二次封装a-upload组件,自定义上传预览
vue2_二次封装a-upload组件,自定义上传预览
1594 0
el-upload图片上传,删除
el-upload是ElementUI中的一个组件,可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码:
1024 0
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
775 0