【elementUI】form表单给upload上传组件校验

最新推荐文章于 2024-06-27 16:35:07 发布
原创 最新推荐文章于 2024-06-27 16:35:07 发布 · 913 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementUI #upload #校验上传组件 #校验upload

本文介绍了如何在elementUI的form表单中，针对upload上传组件进行有效的校验，特别是在上传成功后的回调中取消验证提示的方法。

解决办法：给表单el-form-item绑定个ref，然后在upload上传成功的回调里取消验证提示

<el-form-item ref="headPortrait" label="头像" prop="headPortrait">
	<el-upload
最低0.47元/天 解锁文章
关于修改Antd Form表单中Upload组件默认校验信息内容修改
csdn6107的博客
03-11 1166
关于修改Antd Form表单中Upload组件默认校验信息内容修改 1.新建校验信息函数对象 const checkUpload = () => { return Promise.reject(new Error('请上传图片.....自定义')); }; 2.在FormItem中加入属性 “rules={[{ validator: checkUpload }]}” <Form.Item name={'image_id'} label={'图片'} value
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
qq3892997的博客
11-10 3442
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
elementUI el-form表单的upload(必填校验)上传文件后立即校验
woderuiggya的博客
03-16 2897
1.使用upSuccess。2.使用watch监听。
elementUI中form表单的upload上传图片及校验总结
weixin_33812433的博客
12-28 1万+
自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法 var valiIcon = (rule, value, callback) => { // 图片验证 if (!this.hasFmt) { ...
element Form表单 校验el-upload上传组件
qq_43901960的博客
01-15 1833
element Form表单 校验el-upload上传组件
element-ui 对form表单中upload上传组件的验证
填了个大空℃
12-11 4390
将上传组件放入form表单中，可能会遇到，触发了必传验证之后，再次上传图片，必传验证提示信息未消失，如图 代码如下 // 表单组件中嵌入upload组件 <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="上传头像" prop="imgurl"> <e...
ElementUI中el-form验证el-upload上传的文件
焦向宁的专栏
06-27 6677
1 问题描述 现状 在表单中有一项上传文件的功能，在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件但未上传，对表单进行校验，依旧提示文件未上传，需上传文件。 未上传文件之前的校验结果 上传文件之后的校验结果 期望 在未选择文件之前，对表单进行校验，提示文件未上传，需上传文件；选择文件但未上传，对表单进行校验，应该通过校验。 2 解决思路 2.1 被忽略的但对解决该问题很有用的ElementUI功能 el-upload组件有多个函数钩子来反馈文件上传/删除的状态，
vue+elementUI实现表单和图片上传及验证功能示例
10-17
在现代的前端开发中，表单提交和图片上传是常见的交互形式，而Vue.js作为一种渐进式JavaScript框架，配合Element UI这一基于Vue 2.0的桌面端组件库，可以便捷地搭建出美观且功能强大的界面。 ### Vue + Element UI ...
el-form表单中的el-upload的文件表单验证
dayday_0724的博客
06-25 1908
解决使用element-ui的upload组件中文件表单验证问题
ElementUI Form：Upload 上传
ChinaDragon10的博客
02-01 887
ElementUI Form：Upload 上传
使用element Form 自带校验功能，实现上传控件的校验
weixin_36878452的博客
09-09 765
<template> <div class="upload-imgs flex align-items-center"> <div class="uploadBox" v-if="ossUrl == ''" @click="triggerUpload"> <i class="icon-Popeyes-fonticon-06"></i> </div> &lt.
elementui form表单文件上传
sym_sqc123的博客
06-17 3518
<el-form ref="form" :model="form" label-width="140px"> <el-form-item prop="billFile" class="upload-img-form" ref="uploadElement" label="文件" :rules="{ required: true, message: '请上传图片' }"> <el-upload class="upload-img" ref="upload" actio
elementUI el-form表单的upload上传文件必填校验
小白的笔记
03-15 1万+
elementUI el-form表单的upload上传文件必填校验
使用element-ui的Upload 上传文件
m0_52244931的博客
02-13 3837
使用element-ui的Upload 上传文件
【el-upload】element ui form表单中使用el-upload 上传附件点击导致页面刷新问题以及浏览器url路径中自动拼接带有“&file=“参数
m0_59157023的博客
06-27 621
element ui 中使用el-upload 上传附件点击导致页面刷新问题以及浏览器url路径中自动拼接带有"file="参数。
elementui的el-form和el-upload上传文件和表单数据
一千个读者就有一千个哈姆雷特
12-25 1万+
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。使用append()方法，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾。在使用框架封装好的http请求工具无法传输表单类型的数据，于是自己又引入了一个。注意：实例化一个formData对象,使用append()方法将数据添加到对象中。需要将一大推的数据和文件传到后台，网上看了很多例子都说的不明白，自己研究了下。就是正常的接口 文件用这个接收即可。
【前端相关】elementui使用el-upload组件实现自定义上传
热门推荐
No8g攻城狮的博客
05-24 3万+
官方的描述是说 覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。先定义了一个 el-upload标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在。在这个函数里面，我实现了自定义文件上传的请求。上传文件之前的钩子，参数为上传的文件，若返回。
uveiw form表单 rule校验upload是否上传
最新发布
06-12
<think>我们是在uView框架中，用户需要的是针对文件上传(upload)组件在表单校验中如何验证是否上传完成。根据引用[3]，uView表单校验可以使用自定义验证函数，我们可以参考这个思路。在uView中，Form表单的校验规则中，可以给某个字段设置校验规则，规则可以是数组，包含多个校验条件。针对文件上传，我们通常需要判断用户是否已经上传了文件（即文件列表不为空）或者是否完成了上传（根据上传状态）。由于uView的Upload组件在文件上传过程中会有状态变化（例如上传成功、失败等），我们可以在表单校验中使用自定义验证函数来检查Upload组件的状态。实现思路：1.在表单数据中，我们可以用一个字段（例如`fileList`）来绑定上传的文件列表。2.在规则中，针对这个字段设置自定义验证函数，在该函数中判断文件列表是否有已经上传成功的文件（注意：可能上传失败或者正在上传中，我们需要确保是上传成功的文件）。具体步骤：-在data中定义表单数据，比如：form:{file:[]//用于保存上传成功的文件列表}-在规则中定义：rules:{file:[{required:true,message:'请上传文件',trigger:'change'},{validator:(rule,value,callback)=>{//value就是form.file的值，应该是一个数组//我们需要检查这个数组中是否有上传成功的文件//一般上传成功的文件会有status为'success'（根据uViewUpload组件的状态）if(value&&value.length>0){//这里假设我们只需要有文件就算完成，或者可以检查每个文件的状态//如果要求每个文件都是成功状态，可以这样：constisAllSuccess=value.every(item=>item.status==='success');if(isAllSuccess){callback();}else{callback(newError('有文件未上传完成'));}}else{callback(newError('请上传文件'));}},trigger:'change'}]}注意：上面的自定义校验函数中，我们首先判断了文件数组是否为空（即用户没有选择任何文件），然后判断了每个文件的上传状态是否为'success'。这取决于Upload组件的实现，通常上传成功的文件对象中会包含status属性，值为'success'。但是，uView的Upload组件在文件上传成功后会更新绑定的数组，将上传成功的文件状态设为'success'（参考引用[2]中的示例，虽然引用的是iview，但原理类似）。所以我们可以利用这一点。另外，如果用户允许一次上传多个文件，那么我们需要确保至少有一个文件上传成功（或者全部成功，根据需求）？这里根据业务需求调整。如果用户只需要上传一个文件，并且是必传的，那么我们可以这样写规则：rules:{file:[{validator:(rule,value,callback)=>{if(!value||value.length===0){callback(newError('请上传文件'));return;}//检查是否有文件状态不是success的constnotSuccessFile=value.find(item=>item.status!=='success');if(notSuccessFile){callback(newError('文件未上传完成'));}else{callback();}},trigger:'change'}]}如果非必传，则当value存在且长度大于0时才去检查状态，否则直接通过。参考引用[3]中的邮箱验证，我们可以知道在非必填的情况下，如果用户没有填写（空值），我们直接通过；如果填写了，我们再进行格式校验。同样，对于文件上传，如果非必填：rules:{file:[{validator:(rule,value,callback)=>{//非必填：如果没有上传任何文件，直接通过if(!value||value.length===0){callback();return;}//有文件，检查每个文件是否都上传成功constnotSuccessFile=value.find(item=>item.status!=='success');if(notSuccessFile){callback(newError('有文件未上传完成'));}else{callback();}},trigger:'change'}]}另外，如果用户需要在上传过程中就进行校验（比如用户选择文件后就开始上传，此时可能还未完成），我们可能需要设置trigger为'change'（当文件列表变化时就触发校验）。同时，在上传成功或失败时，文件列表变化也会触发校验。在uView中，我们可以通过以下方式绑定Upload组件到FormItem：-在FormItem上指定prop，如prop="file"-在Upload组件中，我们通常使用v-model绑定到form.file（即表单数据中的file字段）因此，我们在Upload组件的on-success和on-error等事件中更新文件列表（uView的Upload组件会自动更新v-model绑定的值），然后表单校验规则会通过监听变化自动触发。示例代码结构：<u-form:model="form":rules="rules"ref="uForm"><u-form-itemlabel="上传文件"prop="file"><u-uploadv-model="form.file":action="actionUrl":auto-upload="true"//是否自动上传，如果自动上传，那么选择文件后自动开始上传multiple@on-success="onSuccess"//上传成功回调@on-error="onError"//上传失败回调...其他属性></u-upload></u-form-item></u-form>最后，在提交表单时，调用this.$refs.uForm.validate()进行整体校验。注意：由于文件上传可能需要时间，所以用户在点击提交时可能还有文件正在上传，这时候我们可以在自定义校验规则中检测到有文件状态不是成功，就会报错。总结：通过自定义校验函数，检查文件列表中每个文件的状态，可以验证文件是否上传完成。</think> 在uView框架中，对文件上传（Upload）组件进行是否完成的校验，可以通过自定义校验规则实现。核心思路是**通过校验规则判断文件列表状态**，以下是具体实现方案： ### 解决方案 ```vue <template> <u-form :model="form" :rules="rules" ref="uForm"> <!-- 文件上传表单项 --> <u-form-item prop="file"> <u-upload v-model="form.file" :action="uploadUrl" :auto-upload="true" @on-success="handleSuccess" @on-error="handleError" ></u-upload> </u-form-item> <u-button @click="submit">提交</u-button> </u-form> </template> <script> export default { data() { return { form: { file: [] // 绑定文件列表 }, rules: { file: [ { validator: (rule, value, callback) => { /** * 验证逻辑： * 1. 检查是否有文件 * 2. 检查所有文件状态是否为成功 */ if (value.length === 0) { callback(new Error('请上传文件')); // 无文件 } else { const isAllSuccess = value.every(item => item.status === 'success' // uView上传成功状态 ); isAllSuccess ? callback() // 验证通过 : callback(new Error('存在未完成上传的文件')); } }, trigger: 'change' // 文件变化时触发验证 } ] } }; }, methods: { handleSuccess() { // 上传成功时手动触发验证（处理异步场景） this.$refs.uForm.validateField('file'); }, handleError() { // 上传失败时也触发验证 this.$refs.uForm.validateField('file'); }, submit() { this.$refs.uForm.validate(valid => { if (valid) { // 文件全部上传完成后的操作 } }); } } }; </script> ``` ### 关键点说明 1. **校验原理**： - 通过`.every()`遍历文件列表，检查每个文件的`status`属性 - uView中上传成功的文件状态为`'success'` - 使用`validator`自定义验证函数[^3] 2. **状态监听**： - 添加`@on-success`和`@on-error`事件确保实时校验 - 手动调用`validateField()`更新校验状态 3. **特殊场景处理**： ```javascript // 处理部分成功的场景（如3个文件中2个成功） const successCount = value.filter(item => item.status === 'success' ).length; if (successCount !== value.length) { callback(new Error(`${value.length - successCount}个文件上传失败`)); } ``` ### 备选方案：利用Upload组件的回调 ```javascript data() { return { uploadStatus: { success: 0, total: 0 }, rules: { file: [ { validator: (rule, value, callback) => this.uploadStatus.success === this.uploadStatus.total ? callback() : callback(new Error('上传未完成')), trigger: 'change' } ] } } }, methods: { handleUploadProgress() { this.uploadStatus.total++; }, handleUploadSuccess() { this.uploadStatus.success++; } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值