Ant?Design_Form表單上傳文件組件如何實現

本文小編為大家詳細介紹“Ant Design_Form表單上傳文件組件如何實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Ant Design_Form表單上傳文件組件如何實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

背景

需要實現的需求：在一個表單提交中，需要提交各種組件的提交信息，其中包括上傳文件；一般呢，我們會在選擇文件的時候將文件先傳到服務器，拿到文件的URL,在提交表單的時候傳的其實是文件的URL；

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

實現

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

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

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

dom結構大體是這樣：

<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"，發現控制臺的報錯確實沒有了；

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

問題2:

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

tip1:注意一下新增和修改時校驗方法

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

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

tip2: 注意一下beforeUpload的返回值

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

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

因為我在這個方法開始的時候對文件的大小進行了限制，如果不滿足就終止，但是，習慣性的寫成了return；這時候并沒有阻止默認上傳的行為；需要改寫為return false。

讀到這里，這篇“Ant Design_Form表單上傳文件組件如何實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。