关于Element上传组件beforeUpload上传前限制失效问题

 更新时间:2023年03月28日 09:28:15   作者:前端 晓雷  
这篇文章主要介绍了Element上传组件beforeUpload上传前限制失效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Element上传组件beforeUpload上传前限制失效

在before-upload(上传文件之前的钩子 参数为上传的文件 若返回 false 或者返回 Promise 且被 reject 则停止上传)钩子里去做判断 这里有一个坑

当你设置了 :auto-upload="false" 的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断。

beforeUpload(file, fileList) {
   if (file.size / (1024 * 1024) > 500) {  // 限制文件大小
     this.$message.warning(`当前限制文件大小不能大于500M`)
     return false
   }
   
   let suffix = this.getFileType(file.name) //获取文件后缀名
   let suffixArray = ['jpg', 'png', 'jpeg', 'gif'] //限制的文件类型,根据情况自己定义
   if (suffixArray.indexOf(suffix) === -1) {
     this.$message({
       message: '文件格式错误',
       type: 'error',
       duration: 2000
     })
       this.$refs.uploadPhoto.handleRemove(file);
   }
   return suffixArray
 },
 getFileType(name) {
   let startIndex = name.lastIndexOf('.')
   if (startIndex !== -1) {
     return name.slice(startIndex + 1).toLowerCase()
   } else {
     return ''
   }
 }

element中before-upload不起作用的问题 、on-change上传文件大小限制

1、因为设置了:auto-upload="false" 

:on-change="changeImgClick"方法 和 before-upload 发生了冲突 导致before-upload 方法不起作用

如果有:auto-upload="false" 属性就要用:on-change 方法监听

2、on-change上传文件大小限制

当文件超过20MB的时候让他提示文件大小不能超过20MB,请重新上传。

下面我们来看代码:

<el-upload
   class="upload-demo" ref="upload" name="upload" :action="action()"
    :on-change="(file, fileList) => {handleChange(file, fileList, scope);} "
    :on-remove=" (file, fileList) => {handleRemove(file, scope);}"
    :file-list="scope.row.fileList"
    :auto-upload="false"
     >
       <el-button  slot="trigger" size="mini" type="primary" v-if="scope.row.fileList.length == 0" >上传文件</el-button>
</el-upload>

首先在el-upload的:on-change事件里的handleChange的方法中可以获取上传文件的大小

handleChange(file, fileList, scope) {
        //获取上传文件大小
      let imgSize = Number(file.size / 1024 / 1024);
 
      if (imgSize > 20) { 
        this.$msgbox({
          title: "",
          message: "文件大小不能超过20MB,请重新上传。",
          type: "warning",
        });
        this.materialList[scope.$index].fileList.splice(scope.index, 1);
        return;
      } 
 
       //后面可以不用 我自己也没有用到
      this.text = "上传中";
        
      this.loading = true;
      this.materialList[scope.$index].fileList.push(file);
      let data = new FormData();
      data.append("files", file.raw);
      uploadFile(data, scope.row.materialName).then((response) => {
        if (response.success) {
          this.loading = false;
          this.listedFiles[scope.$index] = response.result[0].id;
        } else {
          this.loading = false;
          this.msgError(response.message || "操作失败");
        }
      });
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue+Bootstrap实现简易学生管理系统

    Vue+Bootstrap实现简易学生管理系统

    这篇文章主要为大家详细介绍了Vue+Bootstrap实现简易学生管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • vue中使用gantt-elastic实现可拖拽甘特图的示例代码

    vue中使用gantt-elastic实现可拖拽甘特图的示例代码

    这篇文章主要介绍了vue中使用gantt-elastic实现可拖拽甘特图,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue+element-ui实现主题切换功能

    vue+element-ui实现主题切换功能

    这篇文章主要介绍了vue+element-ui实现主题切换功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • Vue+Element switch组件的使用示例代码详解

    Vue+Element switch组件的使用示例代码详解

    这篇文章主要介绍了Vue+Element switch组件的使用,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • vue-cli脚手架build目录下utils.js工具配置文件详解

    vue-cli脚手架build目录下utils.js工具配置文件详解

    这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • rollup3.x+vue2打包组件的实现

    rollup3.x+vue2打包组件的实现

    本文主要介绍了rollup3.x+vue2打包组件的实现,详细的介绍了打包会存在的问题,包版本的问题,babel 转换jsx等问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-03-03
  • 使用Vue-scroller页面input框不能触发滑动的问题及解决方法

    使用Vue-scroller页面input框不能触发滑动的问题及解决方法

    这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • vue中数组常用的6种循环方法代码示例

    vue中数组常用的6种循环方法代码示例

    在vue项目开发中,我们需要对数组进行处理等问题,这里简单记录遍历数组的几种方法,这篇文章主要给大家介绍了关于vue中数组常用的6种循环方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    这篇文章主要介绍了vue 打包后找不到dist文件夹的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于Vue3+ts封装一个简单版的Message组件

    基于Vue3+ts封装一个简单版的Message组件

    近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下
    2023-09-09

最新评论