Ant Design_Form表单上传文件组件如何实现
导读:本文共1873字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 背景需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件;一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL;刚开始,对文件没有必填的校验,是比较简单的;但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题;实现首先,先对Upload组件加上必传的校验rules={[{... ...
目录
(为您整理了一些要点),点击可以直达。需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件;一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL;
刚开始,对文件没有必填的校验,是比较简单的;但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题;
首先,先对Upload组件加上必传的校验
rules={[{ required: true, message: "请上传文件" }]},
直接添加required
校验,肯定是不行的,我们需要自定义文件的校验;
dom结构大体是这样:
校验:
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
但是控制台报错:
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
按照指示:在Item组件上加上:valuePropName="fileList",发现控制台的报错确实没有了;
但是新的问题来了,当我们上传文件的时候,画面直接崩了!!
Uncaught TypeError: (fileList || []).forEach is not a function
在Item组件上添加getValueFromEvent事件;
这时候校验是没问题了,但是,如果你和我一样,新增的提交和编辑的提交公用的时候,这一块校验还是会有问题;编辑内容的时候我们拿到的是文件的URL地址,不是文件对象,那么校验就会一直过不去;
所以校验方法就需要改一下,判断条件也要加上URL,这一块就不贴代码了~
这里顺道提一下,ant design 中如果不想走默认的上传,就可以beforeUpload
身上做文章了,但是一定要注意拦截默认上传的条件是:
若返回false
则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传
因为我在这个方法开始的时候对文件的大小进行了限制,如果不满足就终止,但是,习惯性的写成了return
;这时候并没有阻止默认上传的行为;需要改写为return false。
Ant Design_Form表单上传文件组件如何实现的详细内容,希望对您有所帮助,信息来源于网络。