圖片按照順序上傳

最近遇到一個文件上傳的需求,這裏記錄一下:

產品希望的效果是可以按照在客戶端選擇的順序上傳,並且展示在頁面中

這裏我使用的組件是antd的Upload組件,該組件支持多文件上傳,但是其對於多個文件上傳的處理通過在控制檯中就可以看到其實是一個一個文件調用接口上傳的,這樣的話因爲文件大小不一致,小的文件就會先返回回來,大的文件就會慢一點,這樣的話就會導致最終傳遞到後端的文件鏈接順序和當初選擇的順序是不一致

對此此類問題網上的解決方案一般有兩種,一種是先把所有的文件先存到一個數組中,等所有文件上傳完成之後再統一調用;第二種解決方案是使用ES6提供的async和await,使得上傳文件同步進行。我這裏採用的是第一種解決方案。等我寫完代碼測試的時候發現我在本地選擇的文件順序和在Upload中的fileList中的順序不能保證100%一致性,文件上傳完成之後是按照文件名的順序來排序的,而不是按照選擇的順序來排的。

比如說我在客戶端選擇的順序是:2.png,1.png,3.png,但是在Upload中fileList順序卻是1.png,2.png,3.png,無論這三張圖片如果調用選擇順序,都是這個結果。

開始我以爲是這個組件的問題,就使用了原生的input=file測試了一下,也是這種效果,看來並不是這個組件的問題。後來Google了一下也並沒有找到什麼好的解決方案,如果一定要追求絕對的順序,從目前來看只能要求業務對文件的命名有一定的順序,或者在上傳之後給業務開放一種排序的功能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章