(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. LintCode_13 字符串查找

    题目 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 您在真实的面 ...

  2. 关于前端调用后端php数据跨域的问题

    https://blog.csdn.net/qq_21386275/article/details/87269979 js前端 <!DOCTYPE html><html>< ...

  3. 在当前目录打开DOS命令行窗口

    [step1]选中文件夹 [step2]shift + 鼠标右键

  4. nginx+supervisor 前后端分离项目的发布流程

    [第一部分] 前端发布(vue项目),假设项目名为demo_vue Step1:编译打包前端项目 cd到demo_vue目录下, 执行cnpm run build:prod命令,生成disc文件夹 S ...

  5. wpf布局控件总结

    首先要认识到wpf所有的布局控件都继承自Panel类,Panel类又继承自其他类.继承关系如下: 一.StackPanel布局面板 1.该面板在单行或者单列中以堆栈的形式放置其子元素. 默认情况下,S ...

  6. 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题

    导语 发布app后,开发者最头疼的问题就是如何解决交付后的用户侧问题的还原和定位,是业界缺乏一整套系统的解决方案的空白领域,闲鱼技术团队结合自己业务痛点在flutter上提出一套全新的技术思路解决这个 ...

  7. HZOI20190821模拟28题解

    题面:https://www.cnblogs.com/Juve/articles/11390839.html 所有官方正解在我的文件里 A. 虎 算法1:我们发现非关键边与黑色边去掉以后,答案就是将所 ...

  8. Web API 上传下载文件

    1.引用了一个第三方组件 ICSharpCode.SharpZipLib.Zip; 2.具体代码 实体类,可以用hashtable 替代 ,感觉hashtable 比较灵活 public class ...

  9. Vue. 之 Element dialog 拖拽

    Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新 ...

  10. svn详解和使用

    2 svn介绍 2.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: > 备份多个版本,占用磁盘空间大> 解决 ...