Element-ui中为上传组件添加表单校验
2023-09-14 09:07:53 时间
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();方法该组件的正则校验。
在开发中所做的总结,文章格式较为简陋,望见谅。
相关文章
- ASP.NET MVC 上传文件方法
- vue之图片上传组件封装
- (小说版)【简历优化平台-2】四个部分初显现,上传按钮打头前
- Python Request POST 上传文件 Multipart/form-data
- 小程序-扩展能力图片上传Uploader组件
- wordpress上传图片不显示的解决办法
- 上传20M的ipa ,使用Appuploader工具只有2分钟左右即可上传成功
- Spring Cloud Feign的文件上传实现详解编程语言
- jQuery File Upload v9.12.6 发布,一个非常优秀的上传组件详解编程语言
- resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传后台c#实现详解编程语言
- springMVC的多文件的异步上传实现详解编程语言
- ABAP根据输入的表名动态生成上传TXT数据的代码详解编程语言
- 服务器上传图片至Linux服务器的步骤(上传图片到linux)
- 简单高效:推荐几款 Linux 上传工具!(linux上传工具)
- JavaBean实现多文件上传的两种方法
- asp.net上传或下载当文件名包含有特殊字符"#"的处理
- PHP支持多种格式图片上传(支持jpg、png、gif)
- android拍照和上传的实现代码
- java使用smartupload组件实现文件上传的方法