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

小果子^_^

已于 2024-04-01 09:28:41 修改

阅读量915

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-03-29 18:05:44 首次发布

本文链接：https://blog.csdn.net/weixin_44021888/article/details/137152970

版权

Vue 专栏收录该内容

61 篇文章 6 订阅

订阅专栏

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

背景：上传不符合后缀的文件，但是还是在页面中显示，使用的是http-request方法；上传文件有两种方式：action和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
        ...
   }