您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Ant Design_Form表單上傳文件組件如何實(shí)現(xiàn)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Ant Design_Form表單上傳文件組件如何實(shí)現(xiàn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
需要實(shí)現(xiàn)的需求:在一個(gè)表單提交中,需要提交各種組件的提交信息,其中包括上傳文件;一般呢,我們會(huì)在選擇文件的時(shí)候?qū)⑽募葌鞯?a title="服務(wù)器" target="_blank" href="http://www.kemok4.com/">服務(wù)器,拿到文件的URL,在提交表單的時(shí)候傳的其實(shí)是文件的URL;
剛開(kāi)始,對(duì)文件沒(méi)有必填的校驗(yàn),是比較簡(jiǎn)單的;但是后來(lái)要求文件是必傳的,需要加上文件的校驗(yàn),就暴漏了一些小問(wèn)題;
首先,先對(duì)Upload組件加上必傳的校驗(yàn)
rules={[{ required: true, message: "請(qǐng)上傳文件" }]},
直接添加required
校驗(yàn),肯定是不行的,我們需要自定義文件的校驗(yàn);
dom結(jié)構(gòu)大體是這樣:
<Item label="上傳文件" name="file" rules={[{ required: true, validator: checkFile }]}> <Upload {...uploadProps}> <div className="upload-content"> {imgUrl ? ( <div className="upload-cover"> <img src={imgUrl} /> </div> ) : ( <div className="upload-btn">{imgLoading ? <LoadingOutlined /> : <PlusOutlined />}</div> )} </div> </Upload> </Item>
校驗(yàn):
const checkFile = (rule: any, value: any) => { if (!value) { return Promise.reject("請(qǐng)上傳文件"); } return Promise.resolve(); };
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
但是控制臺(tái)報(bào)錯(cuò):
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
按照指示:在Item組件上加上:valuePropName="fileList",發(fā)現(xiàn)控制臺(tái)的報(bào)錯(cuò)確實(shí)沒(méi)有了;
但是新的問(wèn)題來(lái)了,當(dāng)我們上傳文件的時(shí)候,畫面直接崩了!!
Uncaught TypeError: (fileList || []).forEach is not a function
在Item組件上添加getValueFromEvent事件;
<Item label="上傳文件" name="file" valuePropName="fileList" rules={[{ required: true, validator: checkFile }]} getValueFromEvent={normFile} >
const normFile = (e: any) => { if (Array.isArray(e)) { return e; } return e?.fileList; };
這時(shí)候校驗(yàn)是沒(méi)問(wèn)題了,但是,如果你和我一樣,新增的提交和編輯的提交公用的時(shí)候,這一塊校驗(yàn)還是會(huì)有問(wèn)題;編輯內(nèi)容的時(shí)候我們拿到的是文件的URL地址,不是文件對(duì)象,那么校驗(yàn)就會(huì)一直過(guò)不去;
所以校驗(yàn)方法就需要改一下,判斷條件也要加上URL,這一塊就不貼代碼了~
這里順道提一下,ant design 中如果不想走默認(rèn)的上傳,就可以beforeUpload
身上做文章了,但是一定要注意攔截默認(rèn)上傳的條件是:
若返回 false
則停止上傳。支持返回一個(gè) Promise 對(duì)象,Promise 對(duì)象 reject 時(shí)則停止上傳
因?yàn)槲以谶@個(gè)方法開(kāi)始的時(shí)候?qū)ξ募拇笮∵M(jìn)行了限制,如果不滿足就終止,但是,習(xí)慣性的寫成了return
;這時(shí)候并沒(méi)有阻止默認(rèn)上傳的行為;需要改寫為return false。
讀到這里,這篇“Ant Design_Form表單上傳文件組件如何實(shí)現(xiàn)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。