背景

需要實(shí)現(xiàn)的需求：在一個(gè)表單提交中，需要提交各種組件的提交信息，其中包括上傳文件；一般呢，我們會(huì)在選擇文件的時(shí)候?qū)⑽募葌鞯椒?wù)器，拿到文件的URL,在提交表單的時(shí)候傳的其實(shí)是文件的URL；

剛開始，對(duì)文件沒有必填的校驗(yàn)，是比較簡單的；但是后來要求文件是必傳的，需要加上文件的校驗(yàn)，就暴漏了一些小問題；

實(shí)現(xiàn)

首先，先對(duì)Upload組件加上必傳的校驗(yàn)

rules={[{ required: true, message: "請上傳文件" }]}，

直接添加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("請上傳文件");
    }
    return Promise.resolve();
};

問題1:

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í)沒有了；

但是新的問題來了，當(dāng)我們上傳文件的時(shí)候，畫面直接崩了?。?/p>

問題2:

Uncaught TypeError: (fileList || []).forEach is not a function

參照官網(wǎng)：ant.design/components/…

在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;
};

最后效果：

tip1:注意一下新增和修改時(shí)校驗(yàn)方法

這時(shí)候校驗(yàn)是沒問題了，但是，如果你和我一樣，新增的提交和編輯的提交公用的時(shí)候，這一塊校驗(yàn)還是會(huì)有問題；編輯內(nèi)容的時(shí)候我們拿到的是文件的URL地址，不是文件對(duì)象，那么校驗(yàn)就會(huì)一直過不去；

所以校驗(yàn)方法就需要改一下，判斷條件也要加上URL，這一塊就不貼代碼了～

tip2: 注意一下beforeUpload的返回值

這里順道提一下，ant design 中如果不想走默認(rèn)的上傳，就可以beforeUpload身上做文章了，但是一定要注意攔截默認(rèn)上傳的條件是：

若返回 false 則停止上傳。支持返回一個(gè) Promise 對(duì)象，Promise 對(duì)象 reject 時(shí)則停止上傳

因?yàn)槲以谶@個(gè)方法開始的時(shí)候?qū)ξ募拇笮∵M(jìn)行了限制，如果不滿足就終止，但是，習(xí)慣性的寫成了return；這時(shí)候并沒有阻止默認(rèn)上傳的行為；需要改寫為return false；

以上就是Ant Design_Form表單上傳文件組件實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于Ant Design_Form表單上傳文件組件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論