(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. 由VMnet引起的browser-sync故障解决方案

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后, ...

  2. Python学习day14-函数进阶(2)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. 如何使用Pig集成分词器来统计新闻词频?

    散仙在上篇文章中,介绍过如何使用Pig来进行词频统计,整个流程呢,也是非常简单,只有短短5行代码搞定,这是由于Pig的内置函数TOKENIZE这个UDF封装了单词分割的核心流程,当然,我们的需求是各种 ...

  4. ip-up脚本参数

    pppoe连接建立后,系统自动调用/etc/ppp/ip-up脚本. 其参数如下面文件所示,第4个参数是系统获得的动态ip.#!/bin/bash## Script which handles the ...

  5. GitHub的使用问题记录

    1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...

  6. HZOI2019 砍树 整除分块

    题目链接:https://www.cnblogs.com/Juve/articles/11207540.html(密码你懂的)——————————>> 这题... 一开始想的二分,但此题不 ...

  7. volatile和指令重排序

    volatile 的作用 1 精致指令重排序 2 多线程访问同一个变量的时候,每次都是取最新的,而不会使用当前cpu缓存的那一份.

  8. 《DSP using MATLAB》Problem 7.29

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  9. 手写Function.bind函数

    if(!Function.prototype.bind){ Function.prototype.bind = function(oThis){ if(typeof this !=="fun ...

  10. VS2005编译VTK5.10.1

    1.从官方下载源文件和数据文件解压到同一个文件夹 2.下载并安装cmake 3.打开cmake选择VTK源文件路径和编译生成路径 注意:在路径里面不能出现中文字符!(我觉得以后的路径尽可能不要有中文字 ...