zoukankan      html  css  js  c++  java
  • el-upload如何做到在添加文件时限制文件类型

    1.查看官方文档

    既然使用人家的组件,肯定要查看官方文档比较好,我们会发现官方提供了选取时文件的类型限制

    2.问题是否解决

    使用accept属性后只能限制选取时的文件类型选项,用户可以通过下拉框选择所有文件,然后这个就没用了

    3.百度问题

    百度去查,发现大部分人都会做二次拦截,但是都是在提交前触发,无法达到我们的效果

    4.解决问题

    一开始我也以为无法实现了,然后仔细一看,发现了另外一个钩子函数,只要将原来的代码写在这个里面就可以了

    附上代码:(展开查看)

    点击查看代码
    handleChange(file,fileList){
          // console.log(file,fileList);
          // 校检文件类型
          if (this.fileType) {
            let fileExtension = "";
            if (file.name.lastIndexOf(".") > -1) {
              fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
              console.log(fileExtension);
            }
            const isTypeOk = this.fileType.some(type => {
              return (fileExtension && fileExtension===type);
            });
            if (!isTypeOk) {
              this.$message.error(
                `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
              );
              fileList.pop(fileList.length-1)
              return false;
            }
          }
          // 校检文件大小
          if (this.fileSize) {
            const isLt = file.size / 1024 / 1024 < this.fileSize;
            if (!isLt) {
              this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
              fileList.pop(fileList.length-1)
              return false;
            }
          }
          return true;
        },
    
  • 相关阅读:
    重建二叉树
    数值的整数次方
    二维数组查找
    二进制中1的个数
    LRU算法的精简实现(基于Java)
    华为18.9.5校招笔试题AK
    避免反射和序列化来破坏单例
    Markdown图片存储解决方法-利用阿里云OSS
    基于Java反射的map自动装配JavaBean工具类设计
    多态与类初始化的底层原理
  • 原文地址:https://www.cnblogs.com/BeatOnDreamOn/p/15520970.html
Copyright © 2011-2022 走看看