微擎ueditor編輯器圖片批量上傳順序混亂的解決方法

上周六有客戶反映剛上線的商城管理系統在商品詳情頁批量上傳圖片的時候出現圖片顯示順序與上傳順序不一致的問題，經排查，發現是編輯器在上傳時是按上傳完成的順序插入圖片的，即先傳完先顯示，在網上查了一下，發現很多人都有遇到這個問題，初步認為是ueditor編輯器的bug，於是按照網上的方法去解決，但都沒有解決問題，調試查找之后發現網上的解決方法根本不適合微擎的多圖上傳，因為涉及的文件都沒有被調用。。。。無奈只好自己查找，在和同事查找了將近一天之后終於找到了兩個相關文件，然后又花了些功夫，最后總算是弄好了，想起來仍心有余悸，接下來把要修改的文件和方法放出來，有需要的可以參考。

web\resource\component\fileuploader\fileuploader.min.js

 

 

在圖中所示位置添加紅框中的代碼，核心代碼是這兩句：

                  let aa=  a.id.split('WU_FILE_');

                    b.key = Number(aa[1]);

 

web\resource\js\app\util.js

 

 在圖中所示位置添加紅框中的代碼，核心代碼是這幾句：

                                       let newArr = JSON.parse(JSON.stringify(b));

                                        for(var i=0; i<b.length; i++){
                                            newArr.splice(b[i]['key'],1,b[i]);
                                        }


                                        b = newArr;

至此就修改完成了，該模塊是改寫的上傳模塊，與ueditor並不一致，所以請不要用ueditor的修改方法去修改