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

本文主要是介绍el-upload组件校验不通过预览列表依然显示图片问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

        <el-uploadclass="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从移除就好了。

这篇关于el-upload组件校验不通过预览列表依然显示图片问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---