快捷導(dǎo)航

Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解

更新時(shí)間：2023年03月07日 14:31:15 作者：coffee

這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

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

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

實(shí)現(xià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();
};

問(wèn)題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í)沒(méi)有了；

但是新的問(wèn)題來(lái)了，當(dāng)我們上傳文件的時(shí)候，畫面直接崩了??！

問(wè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:注意一下新增和修改時(shí)校驗(yàn)方法

這時(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，這一塊就不貼代碼了～