Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验
大家这里直接看代码就可以
<el-form-item class="baseinfo-headimg" ref="headimgUpload" label="上传首图:" prop="headImg">
<el-upload style="display:inline-block;margin-left:5px;"
class="upload-headImg"
list-type="picture-card"
:on-success="handleHeadImgSuccess"
:before-upload='handleHeadImgBefore'
ref="headImgElement"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:action="imageUploadUrl">
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="baseInfo.headImg">
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span
class="el-upload-list__item-delete"
@click="handleHeadImgRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
<i class="el-icon-plus"></i>
</el-upload>
<p class="upload-tip"><span>*</span>图片尺寸300px*300px,不超过60KB</p>
<el-dialog :visible.sync="dialogUploadIsShow">
<img width="100%" :src="baseInfo.headImg">
</el-dialog>
</el-form-item>
js:
baseInfoRules: {
headImg: [
{
required: true, message: '请上传首图', trigger: 'change'
}
]
}, // 表单正则
methods: {
// 首图上传成功
handleHeadImgSuccess(res) {
// xxx的其他操作
this.$refs.headimgUpload.clearValidate(); // 关闭校验
},
}
主要的解决思路为:为upload组件外层的el-form-item添加ref。然后在upload组件上传文件成功后,通过this.$refs.element(元素).clearValidate();方法该组件的正则校验。
在开发中所做的总结,文章格式较为简陋,望见谅。
Element-ui中为上传组件添加表单校验的更多相关文章
- Element UI中的上传文件功能
上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...
- tp中附件上传文件,表单提交
public function tianjia(){ $goods=D('Goods'); if(!empty($_POST)){ if($_FILES['f_goods_image']['error ...
- layui框架实现多图片手动上传和随表单提交方法
首先在官方文档并没有手动上传的说明文档,这里手动实现上传原理是:在表单中有三个按钮,分别是上传图片按钮.隐藏上传按钮.表单提交按钮,点击上传图片按钮之后,图片添加在前端但是并没有真正的上传,而是在点击 ...
- 为什么上传文件的表单里要加个属性enctype
为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...
- servlet文件上传2——复合表单提交(数据获取和文件上传)
上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...
- element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。
element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- ASP中文件上传组件ASPUpload介绍和使用方法
[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上 ...
- Struts2文件上传(基于表单的文件上传)
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
随机推荐
- Linux之facl----设置文件访问控制列表(详解)
setfacl命令 是用来在命令行里设置ACL(访问控制列表) 选项 -b,--remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留. -k,--remove ...
- Centos7下的zabbix安装与部署
目录: 1.Zabbix介绍 2.LAMP/LNMP介绍 3.Zabbix安装与部署 1.Zabbix介绍 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. ...
- ifconfig|grep eth0|awk '{print $5}' 命令详解
因需要将linx下获取某个网中的MAC地址,可以使用如下命令获取: ifconfig|grep eth0|awk '{print $5}' ifconfig: 输出linux下所有网口的信息(包括IP ...
- Delphi 任务栏中不显示窗口
目的: 1. 窗口不在任务栏显示. 2. 窗口不显示在Alt+Tab的切换列表中. 3. 在任务管理器的应用程序列表中不显示. 示例: type TAppWndBrowser = class( TFo ...
- AcWing 29. 删除链表中重复的节点
题目地址 https://www.acwing.com/problem/content/description/27/ 来源:剑指Offer 题目描述在一个排序的链表中,存在重复的结点,请删除该链表中 ...
- django实现多种支付、并发订单处理
django实现多种支付方式 ''' #思路 我们希望,通过插拔的方式来实现多方式登录,比如新增一种支付方式,那么只要在项目中新增一个py文件,导入里面的pay方法就可以了,这样在支付业务中支付语句是 ...
- 深入理解ES6之解构
变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...
- PHP 多进程和多线程的优缺点
PHP 多进程和多线程的优缺点 多进程 1.使用多进程, 子进程结束以后, 内核会负责回收资源 2.使用多进程, 子进程异常退出不会导致整个进程Thread退出. 父进程还有机会重建流程. 3.一个常 ...
- 鸟哥的Linux私房菜笔记第五章,文件权限与目录配置(二)
Linux目录配置的依据--FHS 因为利用Linux来开发产品的公司太多,例如,CentOS.Ubuntu.ReHat...,导致了配置文件存放的目录没有统一的标准.后来就有了FHS(Filesys ...
- linux学习之Ubuntu
查看自己的ubuntu版本,输入以下命令(我的都是在root用户下的,在普通用户要使用sudo)第一行的lsb是因为没有安装LSB,安装之后就不会出现这个东西.LSB(Linux Standards ...