(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();
        }

vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息的更多相关文章

  1. 改变FileUpload文件上传控件的显示方式,选择文件后自动上传

    一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="File ...

  2. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  3. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  4. 在EasyUI项目中使用FileBox控件实现文件上传处理

    我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...

  5. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)

    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...

  6. 基于AngularJs的上传控件-angular-file-upload

    今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...

  7. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  8. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  9. Extjs3 + swfUpload实现多文件上传控件

    要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...

随机推荐

  1. 深入浅出 Java Concurrency (38): 并发总结 part 2 常见的并发场景[转]

    常见的并发场景 线程池 并发最常见用于线程池,显然使用线程池可以有效的提高吞吐量. 最常见.比较复杂一个场景是Web容器的线程池.Web容器使用线程池同步或者异步处理HTTP请求,同时这也可以有效的复 ...

  2. 《DSP using MATLAB》Problem 8.17

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  3. eclipse memory analyzer对系统内存溢出堆文件解析0(转)

    前言 在平时工作过程中,有时会遇到OutOfMemoryError,我们知道遇到Error一般表明程序存在着严重问题,可能是灾难性的.所以找出是什么原因造成OutOfMemoryError非常重要.现 ...

  4. 设置苹果手机input按钮和button按钮颜色显示问题

    网页上,尽管设置了input按钮和button的背景颜色,但在苹果手机上测试时仍会发现背景颜色为透明渐变色,不起作用,怎么解决呢? 在css公共样式中加上下面代码就可以解决,去除button和inpu ...

  5. 提示microsoft incremental linker已停止工作解决方法

    解决方案一:项目->属性->链接器->常规 下面的“启用增量链接”,将“是(/INCREMENTAL)”改为“否(/INCREMENTAL:NO)”.不过这又引入了另外一个警 告:F ...

  6. Unity 用代码设置UGUI的渲染层级

    用代码设置UGUI渲染无非和三个API有关: 1.SetAsFirstSibling(); 2.SetAsLastSibling(); 3.SetSiblingIndex(n) SetAsFirstS ...

  7. supports-screensandroid

    最近在做一个开发者入门的专题,因此一直在搜索关于入门开发的知识和资料,希望能够给开始学习Android开发的朋友提供指导性参考.今天找到了一篇不错的技术文章. 语法: <supports-scr ...

  8. Python+Django+Ansible Playbook自动化运维项目实战

    Python+Django+AnsiblePlaybook自动化运维项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单 ...

  9. 使用Scrapyd部署Scrapy爬虫到远程服务器上

    1.准备好爬虫程序 2.修改项目配置 找到项目配置文件scrapy.cnf,将里面注释掉的url解开来 本代码需要连接数据库,因此需要修改对应的数据库配置 其实就是将里面的数据库地址进行修改,变成远程 ...

  10. Laravel 日志权限问题

    laravel发现日志写入不了, 因为此日志是定时任务生成的, 定时任务的执行用户时root 解决方法: 方法1.修改执行定时任务的用户, 不过www用户时无法登陆的, 可能有点麻烦 方法2.修改la ...