Elementui中图片上传后校验消息不消失

在Element UI中，如果图片上传后验证消息（例如：“请上传有效的图片格式”）不消失，可能是由于以下原因：

1. 验证规则没有正确设置或未触发。
2. 上传组件的on-success或before-upload回调函数中没有正确处理验证逻辑。
3. 表单的状态没有被正确更新，导致验证消息没有被移除。

解决方法：

1. 确保你的表单验证规则是正确设置的，并且已经被触发。
2. 在上传成功的回调函数on-success中，确保你正确地处理了文件上传后的响应，并且更新了表单的状态。
3. 如果使用了before-upload钩子，确保它也正确地处理了文件验证，并且不会因为某些条件导致验证消息的错误显示。
4. 使用Element UI的this.$refs.formName.resetFields()来重置表单，这样可以移除之前的验证结果。

示例代码：

<template>
  <el-form ref="formName">
    <el-form-item prop="image">
      <el-upload
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        action="your-upload-api">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        // 表单验证规则
        rules: {
          image: [
            { required: true, message: '请上传图片', trigger: 'change' },
            { validator: this.validateImage, trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      // 验证图片格式
      validateImage(rule, value, callback) {
        // 你的验证逻辑
        if (!validImage) {
          return callback(new Error('请上传有效的图片格式'));
        }
        callback();
      },
      // 上传文件之前的钩子
      beforeUpload(file) {
        // 你的文件验证逻辑
      },
      // 上传成功的钩子
      handleSuccess(response, file, fileList) {
        // 更新表单状态或重置表单
        this.$refs.formName.resetFields();
      }
    }
  };
</script>

在这个例子中，validateImage 是自定义的验证方法，用于检查上传的文件是否为有效图片格式。handleSuccess 方法在文件上传成功后被调用，并通过this.$refs.formName.resetFields()重置表单，移除之前的验证消息。如果使用before-upload钩子，也应该确保它与验证逻辑一致，并不会产生冲突。