el-upload 自定义上传并校验文件格式

功能：选择图片或其他文件格式，切换类型或格式错误时删除已上传文件
vue

 <el-form-item label="文件类型">
   <el-radio-group v-model="form.fileType" @change='fileList=[]'>
         <el-radio label="0">图纸</el-radio>
         <el-radio label="1">说明文档</el-radio>
     </el-radio-group>
 </el-form-item>
 <el-form-item label="上传文件">
     <el-upload
         class="upload-demo"
         ref="upload"
         :limit=1
         :accept="form.fileType=='0'?'image/jpeg,image/png':''"
         :auto-upload="false"
         :file-list="fileList"
         :on-change='onSuccessLoad'>
         <el-button slot="trigger" size="small" type="primary" @click='fileList=[]'>选取文件</el-button>
         <div slot="tip" class="el-upload__tip">{{form.fileType=='0'?"请选择图片JPG或PNG格式上传":"请选择pdf、word、excel文档上传" }}，且大小不超过2M</div>
     </el-upload>
 </el-form-item>

js

/**
* 文件上传时调用检验
 * */
onSuccessLoad(files, fileList){
    this.uploadForm = []; //存放上传文件
    console.log(files, fileList)
    const isLt2M = files.raw.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        this.$message.warning('上传文件大小不能超过 2MB!');
        this.$refs.upload.handleRemove(files); //可以删除已上传的文件
    }
    else{
        if( this.form.fileType == '1' ){
            console.log(files.raw.name)
            let FileExt = files.raw.name.replace(/.+\./, "");
            if (['pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){
                this.$message.warning('请上传文件格式为pdf、word、excel的附件！');
                this.$refs.upload.handleRemove(files); // 如果不删除，错误文件还会显示，使用这个方法可以删除
            }
            else{
                this.uploadForm = fileList;
            }
        }
        else{
            this.uploadForm = fileList; //如果成功，将文件列表放入数组内，在表格提交时才上传文件
        }
    }
},

//提交表单
submitFun(formName){
    this.$refs[formName].validate((valid) => {
        if (valid) {
            let file = this.uploadForm[0].raw;
            let fd = new FormData();
            fd.append('0',file);
            //uploadFileAction这个请求方法根据自己项目接口写
            let result = uploadFileAction(fd);
            ...
        }
    });
},