博客 / 詳情

返回

antd 上傳文件組件在表單回顯時不顯示下載按鈕

之前需求方提出説想要給表單上傳的文件增加預覽功能,原來點擊展示列表中的文件時,docx文件會啓動下載,而pdf會啓動新的tab頁進入預覽,所以最好是統一處理。

因為我對Upload組件用的不多,對它不夠了解,所以一開始我想着從fileList下手,不用Upload默認的展示列表,經過多番嘗試發現有點麻煩,於是打開官網文檔研究,才發現原來文檔裏已經提供了相關的功能,原來點擊文件的展示列表默認的動作是文檔裏的onPreview回調,要區分預覽和下載的入口,可以增加showDownloadIcon的配置,並增加onDownload的回調用於處理文件的下載,那麼預覽和下載的處理就可以區分開來。

但是問題到這裏並沒有完全解決,當我重新進入表單頁面進入編輯時,也就是表單內容回顯時,發現沒有出現下載按鈕,查了很久的文檔都沒有找到怎麼解決,也在網上搜索了一下,不知道是不是我搜索的關鍵詞不對,就是沒找到答案,就只能自己翻項目裏的依賴包,各種嘗試,才發現原來文件列表中的文件需要同時設置status'done',下載的按鈕才會顯示。

所以表單內容回顯的時候,需要單獨給上傳的文件列表進行處理,因為我這邊接口沒有存status的值,又因為文件上傳成功後,才會被表單整體提交保存,文件的狀態可以默認為done,所以在加載表單內容時,直接給文件列表處理成如下結構就可以。

[
    { url, name, status: 'done' }
]
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.