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组件实现自定义上传
3511 0
|
JavaScript 前端开发
el-upload上传文件
el-upload上传文件
1482 0
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用
基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
4752 0
|
JavaScript 前端开发
Element_文件上传&&多个文件上传
Element_文件上传&&多个文件上传
1198 0
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
3225 0
el-input限制输入整数等分析
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
JavaScript
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时,`@keyup.enter="search()"`事件绑定不生效的问题,并提供了通过使用`.native`修饰符来解决这个问题的方法。
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
3825 1