el-upload组件校验不通过预览列表依然显示图片问题解决

如图校验不通过的图片依然显示在预览列表了，需要在校验不通过的时候移除图片

        <el-upload
            class="upload-cls"
            :action="ossSignature.host"
            :auto-upload="false"
            ref="upload"
            :list-type="listType"
            :limit="limit"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :accept="uploadType"
            :before-upload="beforeUpload"
            :show-file-list="true"
            :file-list="uploadFiles"
        >
            <el-button class="float-l" size="small" type="primary">点击上传</el-button>
            <span>&nbsp;&nbsp;{{ remark }}</span>
        </el-upload>

由于auto-upload = false，校验没办法在beforeUpload事件里添加

最终校验逻辑加在on-change方法里，handleChange方法逻辑如下

        async handleChange(file, fileList) {

            var ext = this.getSuffix(file.name);
            if (this.uploadType.indexOf(ext) < 0) {
                this.handleRemove(file,fileList);
                this.$message.error('仅支持' + this.uploadType + '格式文件');
                return;
            }

            if (this.fileType == 1) {
                var size = file.size / 1024 / 1024;
                if (size > 3) {
                    this.$message.error('图片文件大小仅支持小于3M的图片');
                    this.handleRemove(file,fileList);
                    return;
                }
            }

            if (this.fileType == 2) {
                var size = file.size / 1024 / 1024;
                if (size > 500) {
                    this.$message.error('请上传≤500MB的视频');
                    this.handleRemove(file,fileList);
                    return;
                }
            }
        },
         handleRemove(file, fileList) {
            let index = -1;
            fileList.forEach((e, i) => {
                if (e.uid == file.uid) {
                    index = i;
                }
            });
            if(index >= 0){
                fileList.splice(index, 1);
            }         
        }

主要是利用组件自带的on-change方法，第一个参数file代表当前上传文件，第二个参数就是文件列表对象。实现的主要逻辑就是在类型校验、文件大小限制、视频大小限制不符合的时候，根据uid找到文件index，然后从fileList从移除就好了。