溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Ant Design中使用Upload上傳組件該如何自定義文件列表展示位置，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
macOS Big Sur 11.1
React 16.12.0
Ant Design 4.10.0
現(xiàn)有一個(gè)需求，是上傳文件，點(diǎn)擊瀏覽文件按鈕，選中文件后，在按鈕的上方顯示，上傳的文件列表，如下圖所示
目前使用阿里的Ant UI組件庫，使用其中的上傳組件，官方提供的示例，如下圖如示
本地使用后，如下圖所示
如何才能實(shí)現(xiàn)，我們需要的效果呢，Google了好多文章，找到了一種方式，就是重寫itemRender方法，自定義文件列表的展示，使用這個(gè)方法，需要重寫多個(gè)action。
后來查看公司前端人員寫的代碼，看到另一種解決方法。
主要使用兩個(gè)Upload組件，第一個(gè)Upload組件主要是展示文件列表，第二個(gè)Upload組件是選擇文件上傳的這個(gè)操作，不過，選擇文件后，把文件列表在下方展示隱藏起來。
把得到的文件列表，賦值給第一個(gè)Upload組件中，大概如下：
部分代碼如下：
看完上述內(nèi)容，你們掌握Ant Design中使用Upload上傳組件該如何自定義文件列表展示位置的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
