Ant Design中使用Upload上傳組件該如何自定義文件列表展示位置，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、祁陽(yáng)ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的祁陽(yáng)網(wǎng)站制作公司

軟件環(huán)境

• macOS Big Sur 11.1

• React 16.12.0

• Ant Design 4.10.0

實(shí)際效果

現(xiàn)有一個(gè)需求，是上傳文件，點(diǎn)擊瀏覽文件按鈕，選中文件后，在按鈕的上方顯示，上傳的文件列表，如下圖所示

當(dāng)前效果

目前使用阿里的Ant UI組件庫(kù)，使用其中的上傳組件，官方提供的示例，如下圖如示

本地使用后，如下圖所示

如何才能實(shí)現(xiàn)，我們需要的效果呢，Google了好多文章，找到了一種方式，就是重寫itemRender方法，自定義文件列表的展示，使用這個(gè)方法，需要重寫多個(gè)action。

后來(lái)查看公司前端人員寫的代碼，看到另一種解決方法。

主要使用兩個(gè)Upload組件，第一個(gè)Upload組件主要是展示文件列表，第二個(gè)Upload組件是選擇文件上傳的這個(gè)操作，不過，選擇文件后，把文件列表在下方展示隱藏起來(lái)。

把得到的文件列表，賦值給第一個(gè)Upload組件中，大概如下：

部分代碼如下：

看完上述內(nèi)容，你們掌握Ant Design中使用Upload上傳組件該如何自定義文件列表展示位置的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！