vue+antd上传图片 怎么在表单验证规则

最新推荐文章于 2024-06-01 16:07:25 发布
最新推荐文章于 2024-06-01 16:07:25 发布
阅读量3.6k 收藏 4
点赞数 2
分类专栏： antDesgin问题分享 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kmagi/article/details/107789238
版权

采用antDesgin，表单中有上传组件Upload，然后写了校验规则，提示图片需要上传，上传成功后，依旧提示：图片未上传

如下：

   	<a-form-model-item label="banner展示图" prop="img">
   		<a-upload
   	       class="uploader"
   	        name="image"
   	        list-type="picture-card"
   	        action="/api/Uploads/upload"
   	        :show-upload-list="false"
   	        :before-upload="beforePicUpload"
最低0.47元/天 解锁文章
小时候╭幸福很单纯
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
关于修改Antd Form表单中Upload组件默认校验信息内容修改
csdn6107的博客
03-11 999
关于修改Antd Form表单中Upload组件默认校验信息内容修改 1.新建校验信息函数对象 const checkUpload = () => { return Promise.reject(new Error('请上传图片.....自定义')); }; 2.在FormItem中加入属性 “rules={[{ validator: checkUpload }]}” <Form.Item name={'image_id'} label={'图片'} value
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
12-28
前面跟大家提到过 elementUI验证的问题，那么今天就来看看 点击对话框和关闭按钮 怎么清空验证，清空form表单，避免二次点击还会有 验证错误的提示 1、首先在你的对话框 取消按钮 加一个click事件，例如：（ps:：...
vue3 + antd 图片上传 （精简篇）cv即可
weixin_73318685的博客
11-10 1030
使用antd组件库里的 a-upload 上传图片 name：发到后台的文件参数名 （常用于同一页面需要写多个上传图片时） list-type：上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。 customRequest：通过覆盖默认的上传行为，可以自定义自己的上传实现 （最常用）
Vue3上传（Upload）
Mr Dear的博客
04-25 1万+
可以选择单个文件或多个文件，也可以拖拽文件进行上传；禁用时，只进行展示和预览；可以自定义拦截文件大小和格式；也可以自定上传方法；上传错误时进行全局消息弹出提示。
Ant Design Vue表单验证基本操作，蚂蚁金服三面通过率
m0_60575487的博客
04-21 212
wrapper-col=“wrapperCol” //为输入控件设置布局样式时，使用该属性，用法同 labelCol。formRef.value.resetFields() 清空效验红色提示。labelCol: label 标签布局，同 组件，设置。ref=“formRef” //表单验证会用上这个变量。:model=“formState” //表单数据对象。:rules=“rules” //表单验证规则。// name表单名称，会作为表单字段 id 前缀使用。
vue里的upload为什么明明有值，验证却要报错
zyh99whh的博客
01-11 305
原始错误代码： 错误的关键在于 ：prop的属性名和rules 以及 v-model的属性名不同 qEnclosure qenclosure 所以这样的问题，首先观察这三个的值是否一样
【VUE的Form表单】在Form表单中对上传附件a-upload组件配置必填校验
weixin_55846296的博客
09-22 5787
在Form表单中对上传附件a-upload组件配置必填校验
ant design 文件上传 表单验证
weixin_50249353的博客
08-19 406
文件上传 表单验证
ant-design-vue 图片上传实时校验
最新发布
qq_33548028的博客
06-01 177
自定义校验方法，注意点已经注释说明了。
ant-design form表单校验upload组件(附个人封装的上传组件)
李剑一
07-24 2812
ant-design中form表单校验upload组件
ant-design form表单校验upload组件
唐诺
05-31 177
【代码】ant-design form表单校验upload组件。
AntD框架上传文件前校验信息：选择文件前进行内容校验并提示
weixin_44277114的博客
12-04 3715
AntD框架选择上传文件前校验信息使用场景解决思路注意事项实现代码后记 使用场景 使用a-upload提交文件时，往往会携带其他需要手动输入的信息，a-upload组件本身虽然提供了上传前校验的方法beforeUpload，但该方法是在选择文件后才会进行，这是官方文档的描述： 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob
【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx
12-27
antd+vue实现动态验证循环属性表单的思路 　希望实现查询表单的某些属性可以循环验证必填项：　需求：　1.名称，对比项，备注必填，默认为一行，可增加多行　2.根据名称，动态请求对比项列表，名称变化时，清空该行...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue form check 表单验证的实现代码
11-28
vue-form-check （基于vue的表单验证）具体实现代码如下所述： 安装 // 安装 npm i vue-form-check -S 引用 // 引用(eg. 在工程的main.js下) import vueFormCheck from 'vue-form-check' Vue.use(vueFormCheck) ...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
vue element ui中upload组件如何在form表单中校验
热门推荐
abcde158308的博客
06-05 2万+
采用element ui，一个表单中有上传组件upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失代码如下：&lt;el-form-item label="图标" prop="logo" required&gt; &lt;el-upload class="avatar-u...
vue 对表单中的上传upload组件非空校验（elementui）
qq_39187822的博客
11-25 3894
注意prop要绑定 <el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item label="文件:" style="width: 300px" prop="fileList"> <el-upload v-model="form.fileList" align="left" drag class="upload-demo"
antd-vue upload 上传前验证
随记
03-26 1997
表单： <a-form-model ref="form" :model="form" layout="horizontal" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }"> <a-form-model-item label="论证结果" prop="lzResult" :rules="{required:true,message:'请选择结果'}">
vue3 antdvue 表单验证
01-30
以下是使用Vue3和Ant Design Vue进行表单验证的示例： ```vue <template> <a-form :form="form" @finish="handleSubmit"> <a-form-item label="名称" name="name" :rules="nameRules"> <a-input v-model="form.name" /> </a-form-item> <a-form-item label="对比项" name="compare" :rules="compareRules"> <a-input v-model="form.compare" /> </a-form-item> <a-form-item label="备注" name="remark" :rules="remarkRules"> <a-input v-model="form.remark" /> </a-form-item> <a-button type="primary" html-type="submit">提交</a-button> </a-form> </template> <script> import { defineComponent, ref } from 'vue'; import { Form, Input, Button } from 'ant-design-vue'; export default defineComponent({ components: { 'a-form': Form, 'a-form-item': Form.Item, 'a-input': Input, 'a-button': Button, }, setup() { const form = ref(null); const nameRules = [ { required: true, message: '名称不能为空' }, ]; const compareRules = [ { required: true, message: '对比项不能为空' }, ]; const remarkRules = [ { required: true, message: '备注不能为空' }, ]; const handleSubmit = () => { form.value.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 console.log('表单验证通过'); } else { console.log('表单验证失败'); } }); }; return { form, nameRules, compareRules, remarkRules, handleSubmit, }; }, }); </script> ``` 这个示例中，我们使用了Vue3的`defineComponent`和`ref`函数来定义组件和创建响应式数据。我们还引入了Ant Design Vue的表单组件，包括`Form`、`FormItem`、`Input`和`Button`。 在模板中，我们使用`a-form`组件来创建表单，并将表单对象绑定到`form`变量上。每个表单项都使用`a-form-item`组件包裹，并设置相应的`name`和`rules`属性来进行验证。当点击提交按钮时，我们调用`handleSubmit`方法来进行表单验证，如果验证通过，则执行提交操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值