vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息

(ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助。如果还有其他方法,可以留言,谢谢)

一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则,当不上传图片时,会提示请上传图片,当上传图片后,提示不会消失;

代码如下:

 <el-form-item label="XXX" ref="image" prop='imageUrl'>
     <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.demo" :src="form.demo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
</el-form-item>
校验规则:
  imageUrl:[{
               required: true,
               message: '请上传',
       }]
如何清楚这个提示信息呢?我们也许会用官网上得这几行代码如下:
this.$refs[formName].validate((valid) => {
          if (valid) {
            
          } else {
           
          }
 });
经过我在项目中,验证显然是没有达到预期得效果。这样也是会有问题,会影响其他的校验内容。经过查询资料,找到了一个比较好得方法。
想要清空原来上传图片下方的提示信息,只需要在上传组件上绑定ref,在on-success钩子中调用this.$refs.XXX.clearFiles(),就可以清除。
代码如下:
  handleAvatarSuccess(res, file) {
                this.$refs.image.clearValidate();
        }

posted on 2018-07-27 10:13  平平淡淡summer  阅读(4770)  评论(0编辑  收藏  举报

导航