1. 程式人生 > >UEditor上傳圖片後,展示的順序與選擇時順序不一致(多圖上傳)

UEditor上傳圖片後,展示的順序與選擇時順序不一致(多圖上傳)

UEditor多圖上傳時,由於後臺上傳介面返回的時間不同,會造成顯示上傳後的圖片與選擇時的圖片順序不一致的問題。
舉個栗子:
多圖上傳時,先後選擇了a.png和b.png,其中a.png大小為900k,b.png大小為5k,當上傳成功後點擊確認按鈕, 發現b.png在a.png前面。即選擇的時候順序為 a.png 、b.png,而上傳成功後顯示的順序為b.png 、 a.png ,因為a.png比b.png要大很多,後臺介面優先處理完畢並返回b.png,所以顯示順序發生了變化。
處理方法:
這裡寫圖片描述

在以上位置,插入以下處理程式碼即可

// 對上傳成功後的圖片按照選擇的順序進行排序
var initImags = uploadImage.uploader.getFiles() // 獲取選擇的所有檔案
var sortedImgs = [] // 排序後的上傳成功檔案 for (var i = 0; i < initImags.length; i++) { for (var j = 0; j < list.length; j++) { if (list[j].title === initImgs[i].name && initImgs[i].flag != '1') { sortedImgs.push(list[j]) initImgs[i].flag = '1' } } } list = sortedImgs

即:
這裡寫圖片描述

具體處理的方法有很多種,initImgs[i].flag 的目的是為了防止圖片重名時造成的重複判斷