vue element ui在form表单中如何校验upload组件

最新推荐文章于 2023-08-16 00:41:21 发布

智慧的狗狗

最新推荐文章于 2023-08-16 00:41:21 发布

阅读量1.7k

点赞数 1

分类专栏： vue-element

本文链接：https://blog.youkuaiyun.com/qq_43427364/article/details/106138353

版权

vue-element 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在Vue项目中使用form-item和upload组件进行图片上传的方法。通过给form-item设置独立的ref，可以在upload组件上传成功后清除验证提示，避免了上传后仍显示必填项错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体解决思路：给form-item 加一个独立的ref获取该组件信息，正常添加规则，在upload组件的成功回调函数里面取消提示即可
在这里插入图片描述
rules规则

 bookImageUrl:[{required: true,message: "请选择图书封面", trigger: "change" }]

upload 组件的succes上传成功的回调函数里面加 ref取消提示即可

    handleAvatarSuccess(res, file) {
      this.bookTableForm.bookImageUrl = URL.createObjectURL(file.raw);
      this.$refs.bookimg.clearValidate();
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

智慧的狗狗

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uview如何在form中使用upload上传图片

qq_45018844的博客

12-15

6676

效果表单代码 <u-form-item label="照片" prop="photo"> <u-upload width="160" ref="uUpload" :show-progress="false" height="160" :action="action" :auto-upload="true" @on-remove="onRemove" :file-list="fileList" @on-success="successUpload">

vue element-ui 表单校验如何校验上传图片是否为空

weixin_43962877的博客

03-31

6006

<template> <div> <el-form ref="form" :rules='rules' :model="formsq" label-width="80px"> <el-form-item label="商品名称" prop="name"> &lt...

2 条评论您还未登录，请先登录后发表或查看评论

vue element ui中upload组件如何在form表单中校验

热门推荐

abcde158308的博客

06-05

2万+

采用element ui，一个表单中有上传组件upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失代码如下：<el-form-item label="图标" prop="logo" required> <el-upload class="avatar-u...

element-ui 对form表单中upload上传组件的验证

填了个大空℃

12-11

4243

将上传组件放入form表单中，可能会遇到，触发了必传验证之后，再次上传图片，必传验证提示信息未消失，如图代码如下 // 表单组件中嵌入upload组件 <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="上传头像" prop="imgurl"> <e...

Element-ui中表单（Form）校验的几种形式及表单嵌套表格含上传（Upload）组件的综合案例

明天也要努力的博客

10-20

1801

基础姿势/自定义姿势 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="年龄

使用el-upload 上传图片组件，验证图片是否上传成功的两种方式。

qq_42797435的博客

10-28

2567

使用el-upload 上传图片组件，验证图片是否上传成功的两种方式。

vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)

撑戌圆爱痒生

07-21

1390

Element UI 表单使用记录element ui 表单input文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式xxxx-xx-xx格式转换为中国标准时间时间选择中国标准时间与xx:xx:xx时间格式的转换中国标准时间转换为xx:xx:xx时间格式xx:xx:xx时间格式转换为中国标准时间单选select下拉上传视频检测规则及绑定数据提交表单 element ui 表单这次做了一个后台管理系统,用到了Element UI组件做个记

element-ui upload组件多文件上传的示例代码

10-17

Element-UI Upload组件是基于Vue.js的前端框架Element UI中的一个功能强大的上传组件，它提供了丰富的自定义选项和事件处理，适用于多种文件上传场景。在本示例中，我们将深入探讨如何利用Upload组件实现多文件上传...

vue+element-ui form表单中显示图片

最新发布

10-08

在Vue Element-UI的表单中显示图片，你可以使用Element-UI的Upload组件来实现。首先，你需要在表单中添加一个Upload组件，用来上传图片： ```vue <el-form> <el-form-item label="图片"> <el-upload class=...

Vue+Element-UI实现上传图片并压缩

12-30

Vue+Element-UI 上传图片并压缩，供大家参考，具体内容如下 1.版本 Vue:2.5.2 Element-UI：2.12.0 可实现图片上传前，自动压缩。 Element-UI组件，详情见官网。 2.template部分照片> <el-upload accept=...

Vue+Element+upload文件上传前校验类型和大小、抛出异常或错误、正则表达式、截取字符串、转小写、toLowerCase、lastIndexOf、includes、RegExp、throw

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

08-16

1132

Vue+Element+upload文件上传前校验类型和大小、抛出异常或错误、正则表达式、截取字符串、转小写、toLowerCase、lastIndexOf、includes、RegExp、throw

uniapp上传图片的表单校验

starstarstarl的博客

02-16

1418

uniapp上传图片的表单校验

【vue】表单校验之上传文件校验

Write less，do more

01-18

2285

问题描述：正常吧fileList放在payForm里面的话，验证每次输入其他input都会导致上传文件的刷新所以需要把保存文件和验证文件分开存储，来验证，这样才能不出现界面BUG <el-form ref="payForm" :model="payForm" :rules="payFormRules" label-width="150px"> <el-form-item label="支付款项账号：" prop="pay_account"> &

u-form表单校验的校验方法

Working_hard_111的博客

03-29

2757

例如，对于用户名，我们定义了两个规则：required表示该项为必填项，message表示在校验失败时提示用户输入用户名，trigger表示该规则的触发条件，blur表示在输入框失去焦点时触发校验。在submitForm方法中，我们使用了validate方法来进行表单校验，如果校验通过，就弹出"提交成功"的提示，否则弹出"提交失败"的提示。总之，u-form表单校验是一种方便、快捷的前端表单校验方式，可以帮助我们提高数据的准确性和完整性，避免用户输入不。

Vue/ElementUI上传文件检验

m0_56218757的博客

07-07

1584

vue上传文件检验

vue上传图片

weixin_72764028的博客

03-21

233

vue上传图片并让图片回显

vue3.0+element Plus表单提交，表单重置，表单校验

m0_52761651的博客

10-27

7396

vue3.0+element Plus表单提交，表单重置，表单校验

封装一个图片上传组件的方法

m0_68331234的博客

06-14

1916

封装一个上传图片的组件