(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. Python(四)基础篇之「文件对象&错误处理」

    [笔记]Python(四)基础篇之「文件对象&错误处理」 2016-12-08 ZOE    编程之魅  Python Notes: ★ 如果你是第一次阅读,推荐先浏览:[重要公告]文章更新. ...

  2. 基于neighborhood models(item-based) 的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.2neighborhood models部分内容(其余部分会陆续补充上来). koren论文中用到netflix 数据集, 过于大, 在普通的 ...

  3. hadoop settings

    ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys expor ...

  4. 小程序 设置tabBar选中颜色和图标

    "tabBar": { "selectedColor": "#4da9ff", //颜色 "list": [{ &quo ...

  5. AlexNet详细解读

    AlexNet详细解读 目前在自学计算机视觉与深度学习方向的论文,今天给大家带来的是很经典的一篇文章 :<ImageNet Classification with Deep Convolutio ...

  6. [转]Visual Studio 2010单元测试(2)--运行测试并查看代码覆盖率

    Visual Studio 2010 单元测试--运行测试并查看代码覆盖率 运行测试并查看代码覆盖率对程序集中的代码运行测试时,可以通过收集代码覆盖率数据来查看正在测试的项目代码部分. 运行测试并查看 ...

  7. CodeForces - 1087D

    CodeForces - 1087Dhttps://vjudge.net/problem/2115151/origin2*和/叶子结点的个数 #include<iostream> #inc ...

  8. centos 重新编译php

    说明:系统原来通过源码安装了php7.1.0.网上找了很多彻底删除原来php的办法,执行命令php -v PHP版本信息始终都在,说明方法都无用.自己大胆做了如下尝试,成功重新编译php 查找php ...

  9. 浏览器标准模式与怪异模式-CSS1Compat and BackCompat

    由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 ...

  10. MyBatis配置文件(四)--typeHandlers

    typeHandlers又叫类型处理器,就像在JDBC中,我们在PreparedStatement中设置预编译sql所需的参数或执行sql后根据结果集ResultSet对象获取得到的数据时,需要将数据 ...