背景

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

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

實現(xiàn)

首先，先對Upload組件加上必傳的校驗

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

直接添加required校驗，肯定是不行的，我們需要自定義文件的校驗；

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>

校驗：

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?

但是控制臺報錯：

warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?

按照指示：在Item組件上加上：valuePropName="fileList"，發(fā)現(xiàn)控制臺的報錯確實沒有了；

但是新的問題來了，當我們上傳文件的時候，畫面直接崩了??！

問題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:注意一下新增和修改時校驗方法

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

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

tip2: 注意一下beforeUpload的返回值

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

若返回 false 則停止上傳。支持返回一個 Promise 對象，Promise 對象 reject 時則停止上傳

因為我在這個方法開始的時候?qū)ξ募拇笮∵M行了限制，如果不滿足就終止，但是，習慣性的寫成了return；這時候并沒有阻止默認上傳的行為；需要改寫為return false；

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

最新評論