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中为上传组件添加表单校验的更多相关文章

  1. Element UI中的上传文件功能

    上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...

  2. tp中附件上传文件,表单提交

    public function tianjia(){ $goods=D('Goods'); if(!empty($_POST)){ if($_FILES['f_goods_image']['error ...

  3. layui框架实现多图片手动上传和随表单提交方法

    首先在官方文档并没有手动上传的说明文档,这里手动实现上传原理是:在表单中有三个按钮,分别是上传图片按钮.隐藏上传按钮.表单提交按钮,点击上传图片按钮之后,图片添加在前端但是并没有真正的上传,而是在点击 ...

  4. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  5. servlet文件上传2——复合表单提交(数据获取和文件上传)

    上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...

  6. element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  7. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  8. ASP中文件上传组件ASPUpload介绍和使用方法

    [导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上 ...

  9. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

随机推荐

  1. git命令教程

    git教程笔记 Git是什么? Git是一个分布式版本控制系统 版本控制方式 集中式版本控制:从版本库中先取得最新的版本,改完之后再上传到版本库中,需要联网 分布式版本控制:每个合作者电脑上都有一个版 ...

  2. BeanUtils.populate()空字符串转换日期的解决办法

    我们在使用beanutils.populate()封装参数时,如果封装的字符串是空,在转换成date时会出现以上异常,此时可以在工具类中添加静态代码块即可解决:注意导入beanutils 包 impo ...

  3. 在做nav-bar部分点击路由跳转相同地址时,控制台报错问题。

    报错信息: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: &qu ...

  4. ES6-新增的数组操作,数组解构,forEach,fillter,some.map的数组遍历,数组转换字符串

    ES6-新增的数组操作 // es6数组格式 let json = { '0' : 'anan', '1' : 'anani', '2' : 'anania', length:3 } //es6 把数 ...

  5. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  6. 查找 oracle 数据库中包含某一字段的所有表的表名

    select table_name from DBA_TAB_COLUMNS where COLUMN_NAME='字段名'; 字段名需要大写

  7. Flutter学习笔记(6)--Dart流程控制语句

    如需转载,请注明出处:Flutter学习笔记(5)--Dart流程控制语句 条件语句:if.if...elseif.if...elseif...else ; ) { print('优秀'); } &g ...

  8. 关于xshell连接limux界面按退格键不正常的问题

    这个问题通过修改xshell终端属性可以解决,步骤如下: "文件" -> "属性" -> "终端" -> "键盘 ...

  9. vue跨域

    比如 我要请求的地址是https://edu.51cto.com/center/seckill/index/get-seckill-data 首先去 config ==> index.js 添加 ...

  10. AcWing 901. 滑雪

    地址 https://www.acwing.com/problem/content/description/903/ 题目描述给定一个R行C列的矩阵,表示一个矩形网格滑雪场. 矩阵中第 i 行第 j ...