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. Python进阶一

    文章目录 异常处理 1 基本用法 2高级用法 逻辑运算符 循环的高级用法 异常处理1 基本用法应对所有情况 try: 1/0 except: print('某原因异常') 应对特定异常情况 try: ...

  2. JavaScript中的this绑定丢失及解决方法

    经常犯的错误:混淆了this绑定规则. 代码如下: var obj = { id: 'vexekefo', cool() { console.log(this.id); } }; var id = ' ...

  3. oracle表空间相关统计查询

    部分转自 https://www.cnblogs.com/xwdreamer/p/3511047.html--查询表空间使用情况SELECT UPPER(F.TABLESPACE_NAME) &quo ...

  4. CUDA 编程相关;tensorflow GPU 编程;关键知识点记录;CUDA 编译过程;NVCC

    本文章主要是记录,cuda 编程过程中遇到的相关概念,名字解释和问题:主要是是用来备忘: cuda PTX :并行线程执行(Parallel Thread eXecution,PTX)代码是编译后的G ...

  5. 推荐几个公众号Markdown格式化网站

    好多人都喜欢用 Markdown 写文 但是公众号后台编辑又不支持 Markdown 因此,催生出了一系列 Markdown 渲染格式化的工具网站 我使用了其中的一些 分享给你 1.Md2All 官方 ...

  6. 给那些迷茫的人学习JAVA的一些建议?

    前语:我用了3年的时间,一步一步走到了现在,半途也有了解过其他的技能,也想过要转其他的言语,可是最终仍是坚持下来走Java这条路,希望我的经历能够帮忙到后来的人,要是觉得对你有帮忙的话,能够注重一下和 ...

  7. vue--npm的使用

    npm介绍 NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具.通过NPM 可以安装.共享.分发代码,管理 ...

  8. HTML文件通过jQuery引入其他HTML文件报错has been blocked by CORS policy

    HTML通过jQuery引入模板 完整报错 新创建一个chrome快捷方式,命名为chrome-debug 右键属性,在目标后添加参数,原始路径如下 "C:\Program Files (x ...

  9. Note | 用Hugo搭建博客并部署到GitHub Pages

    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...

  10. intellij idea从git检出代码并建立工程

    1. 打开intellij idea,点击configure,settings 2. 左侧展开Version Control,点击Git,点击下图中红框中按钮 3. 在弹出窗口中找到git.exe,点 ...