vue 清除upload成功上传之后的验证信息

最新推荐文章于 2024-04-30 10:14:52 发布
最新推荐文章于 2024-04-30 10:14:52 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： Java基础 vue 文章标签： node.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rookiediary/article/details/108734047
版权

在提交表单之前往往会对必填项进行校验，未填项下方会弹出必传提示语，必传项填上值之后提示语会消失，但是在使用<el-upload>组件上传文件之后，提示语并没有消失。

解决办法是：在上传组件成功后方法里面做处理

this.$refs.form.clearValidate(),清除表单所有验证信息

this.$refs.form.resetFields()，清除表单字段值

rookiediary
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+iview使用upload上传图片成功后清除痕迹
qq_45222558的博客
04-13 2100
vue+iview使用upload上传图片成功后清除痕迹
vue element上传成功后 怎么去除提示请上传文件的提示信息
weixin_30535043的博客
09-16 2859
<el-form-item label="上传文件:" style="margin-left: 65px;" v-model="ruleForm.file" prop="file" :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> <el-upload el-upload ...
upload图片上传完毕时自动取消校验
qq_60692304的博客
04-19 1041
项目场景： 提示：相关背景： 上传图片时，需要对图片进行校验，未添加图片提交时不能通过校验，添加完图片校验自动消失， 解决方案： 提示：这里填写该问题的具体解决方案： 例如：绑定一个 :on-change 事件， <el-form ref="form" :rules="rules" :model="popupContent" label-width="80px" > <e
el-upload上传图片的必填检验异常处理
最新发布
m0_48738983的博客
04-30 230
1.在有检验信息的情况下，上传图片，检验信息并不会消失。2.监听绑定字段，如果有值，则添加清除校验。【1】在上传成功后清理校验。
vue的Element组件上传文件el-upload上传成功后清空
热门推荐
zhy的博客
09-30 5万+
如果有多个组件可以使用：file-list，可以设置file-list="[]"其中timer是需要修改的，每次新增或修改的时候修改timer的值即可。解决了之后可以给自己放松下，玩下这个解压的微信小游戏。然后清空normal字段即可。
Vue取消表单校验提示的方法
呼叫冰河谷博客
04-08 473
不要使用，因为它会清楚提示的同时把表单值还原为初始值。
VUE UPLOAD 通过ACTION返回上传结果操作
10-14
Vue Upload组件是Vue.js生态中的一个用于文件上传的组件，它允许用户选择文件并将其发送到服务器进行处理。在实际开发中，我们经常需要通过ACTION属性来指定上传的URL，以便将选定的文件发送到服务器。然而，有时...
基于vue-upload-component封装一个图片上传组件的示例
10-17
【基于vue-upload-component封装图片上传组件的步骤与技术解析】 在Web开发中，图片上传功能是常见的需求之一。本文将详细介绍如何基于`vue-upload-component`库封装一个自定义的图片上传组件，以满足多图上传、...
VUE 实现element upload上传图片到阿里云
10-14
主要介绍了VUE 实现element upload上传图片到阿里云，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue_upload图片上传支持拖拽
10-26
在Vue.js应用中，实现图片上传功能是常见的需求，特别是支持拖拽上传，可以提供更好的用户体验。在本文中，我们将深入探讨如何在Vue.js中实现这个功能，同时也会涉及到JavaScript和上传相关的技术。 ### Vue组件化...
vue+el_upload实现文件上传的方式.doc
02-01
"Vue+el_upload实现文件上传的方式" 在Web开发中，文件上传是一个非常常见的需求。 Vue.js是一个流行的前端框架，el_upload是一个基于Element UI的文件上传组件。通过组合这两个技术栈，我们可以轻松实现文件上传的...
【vue】 element upload文件上传后表单校验信息还存在
amoureux555的博客
11-02 1848
element upload文件上传后表单校验信息还存在
Element-UI中为上传组件添加表单校验规则的清除
来啦(#^.^#)
05-14 912
为upload组件外层的form-item添加ref； 在upload组件上传成功后(onsuccess), 通过this.$refs.element.clearValidate()清空该组件的校验规则
el-form 图片校验，上传之后清除校验信息
曲小强
08-17 219
【代码】el-form 图片校验，上传之后清除校验信息。
表单验证:多个upload上传图片验证，并且上传成功后清除提示信息
tomorrownan的博客
12-17 2353
在加上表单验证以后，必填项不填会有提示信息。像一般的input输入框，有正确内容输入后提示信息就会自动消失。但是el-upload上传图片以后提示信息依然还在。如下： 解决方法 在文件上传成功时的钩子函数on-success定义的方法中写一句清除验证器的代码既可以实现。如下代码： 验证规则： 上传文件成功的钩子函数定义的方法写上下面关键的一句上传图片后提示信息就已经清除： 效果： ...
element 表单校验上传图片及富文本（vue2）
淡淡的芦苇的博客
01-13 2062
element 表单校验上传图片及富文本（vue2）
el-upload
蒙蒙细雨的博客
07-13 392
1.上传文件必填 上传成功的回调函数执行一下 this.$refs.elupload.clearValidate();
vue+elementUI,实现表单验证中的图片上传验证(el-form与el-upload)
lxuanz的博客
01-04 3835
element ui对上传图片校验
搭配el-upload的动态新增删除表单+对重复项进行校验
lcc0628的博客
09-08 709
目标效果 1.动态新增删除表单 2.校验规则（重点是upload的上传后清除校验提示） 3.对重复项进行校验，只能想到这种比较复杂的方法，有更好的建议请指教T T 代码参考 html部分 //html <el-form ref="editForm" :model="editForm" :rules="editRules" inline label-wid..
vue-upload-component onloaded取得上传后文件信息
06-11
Vue-upload-component 提供了 on-success 属性用于获取上传成功后的文件信息。该属性绑定的方法会在上传成功后执行，并且会传入一个参数，该参数即为上传成功后的文件信息。例如： ``` <template> <div> <file-upload ref="fileUpload" :extensions="['jpg', 'png']" :on-success="onSuccess" /> </div> </template> <script> import FileUpload from 'vue-upload-component'; export default { components: { FileUpload, }, methods: { onSuccess(file) { console.log('文件上传成功：', file); }, }, }; </script> ``` 在上述代码中，我们将 on-success 属性绑定到了一个方法 onSuccess 上。当文件上传成功后，该方法会被执行，并且会将上传成功后的文件信息作为参数传入。在该方法中，我们可以通过打印参数 file 来获取上传后的文件信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值