vue使用el-upload上传,上传错误文件,名称还会显示

vue使用el-upload上传,上传错误文件,名称还会显示

背景:上传不符合后缀的文件,但是还是在页面中显示,使用的是http-request方法

代码:

<el-upload multiple class="avatar-uploader" action="#" :before-upload="(e, fileList) => {beforeUpload(e, fileList, scope.row, scope.$index)}"  :file-list="scope.row.fileList"  :on-remove="handleRemove()" :before-remove="(e, fileList) => {beforeRemove(e, fileList, scope.row, scope.$index)}" :http-request="(e, fileList) => {handleChange(e, fileList, scope.row, scope.$index)}">
  <el-button style="background-color: #fff; color: gray; border-color: gray;"  size="small" icon="el-icon-circle-plus-outline" type="primary"></el-button>
</el-upload>
// 限制上传文件格式
      limitChange(file, row) {
        var limitFile = true;
        var msg = "";
       //获取文件后缀
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        if (row.templateType === 1) {
          // 上传图片jpg、png
          const whiteList = ["jpg", "png"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传图片只能是jpg、png格式');
            limitFile = false;
          }
        } else if (row.templateType === 2) {
          // 上传压缩文件 zip、rar
          const whiteList = ["zip", "rar"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传图片只能是zip、rar格式');
            limitFile = false;
          }

        } else if (row.templateType === 3) {
          // 上传音视频 mp3、mp4
          const whiteList = ["mp3", "mp4"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传图片只能是mp3、mp4格式');
            limitFile = false;
          }
        } else if (row.templateType === 5) {
          // 上传文档:pdf、doc、docx、ppt、pptx
          const whiteList = ["pdf", "doc", "docx", "ppt", "pptx"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传图片只能是pdf、doc、docx、ppt、pptx格式');
            limitFile = false;
          }
        } else if (row.templateType === 6) {
          // CAD:dwg,dfx
          const whiteList = ["dwg", "dfx"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传文件只能是dwg、dfx格式');
            limitFile = false;
          }
        } else if (row.templateType === 7) {
          // 三维模型:skp,max,fbx
          const whiteList = ["skp", "max", "fbx"];
          if (whiteList.indexOf(fileSuffix) === -1) {
            this.$message.error('上传文件只能是skp、max, fbx格式');
            limitFile = false;
          }
        }
        return limitFile;
       
      },
      // 上传附件,有时间和上传图片一起封装成一个方法
      handleChange(e, fileList, row, index) {

        var flag = this.limitChange(e.file, row);
        if (!flag) {
        // 主要是这一句
          e.onError()
          return;
        }
        var vm = this
        let file = e.raw
        ...
   }

相关推荐

  1. 限制el-upload组件的文件大小

    2024-03-30 04:02:01       68 阅读
  2. el-upload文件前端自己读取excel

    2024-03-30 04:02:01       38 阅读
  3. vue若依el-upload实现oss

    2024-03-30 04:02:01       51 阅读
  4. vue 分布式文件vue-simple-uploader

    2024-03-30 04:02:01       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-30 04:02:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-30 04:02:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-30 04:02:01       82 阅读
  4. Python语言-面向对象

    2024-03-30 04:02:01       91 阅读

热门阅读

  1. 2024年最新github排行前100名项目

    2024-03-30 04:02:01       42 阅读
  2. for in 和 for of的区别

    2024-03-30 04:02:01       41 阅读
  3. 中台理念下的多应用场景平台构建与实践

    2024-03-30 04:02:01       42 阅读
  4. docker容器退出后数据丢失怎么恢复?

    2024-03-30 04:02:01       40 阅读
  5. 面试题:IoC容器的理解与实例化过程

    2024-03-30 04:02:01       39 阅读
  6. 【Python】如何入门 Python:系统化方法与实践路径

    2024-03-30 04:02:01       41 阅读
  7. 算法练习----力扣每日一题------1

    2024-03-30 04:02:01       47 阅读
  8. 阳光消费金融2023利润创新高,固收业务立功

    2024-03-30 04:02:01       40 阅读
  9. Gitea 的简单介绍

    2024-03-30 04:02:01       40 阅读
  10. C#——系统学习(LINQ)

    2024-03-30 04:02:01       40 阅读
  11. linux下守护进程supervisor

    2024-03-30 04:02:01       48 阅读