本文目的有兩個，一、廢掉單圖上傳，二、改造多圖上傳
大家都知道百度ueditor不是針對vue項目開發的，官方文檔提供的源碼包里有需要后端配置的接口，but到vue項目就不太好辦了，網上有些文章也介紹了如何把這個編輯器整合到vue項目中去，但涉及到圖片上傳的部分都沒用，ueditor.config.js中有個serverUrl配置項，作用就是設置圖片上傳接口，把后端給的接口填進去，結果是單圖無法上傳，多圖可以上傳，這里就是對單圖和多圖上傳進行修改。
一、廢掉單圖上傳
打開ueditor.all.js大概在28464行有一段初始化簡單上傳插件的ui代碼，直接給注釋掉就行了
二、改造多圖上傳
先說說多圖上傳存在的問題，這里用的是“多圖上傳” -> “本地上傳”，圖片上傳后不論成功與否都沒有刪除按鈕，如果用戶誤傳了一張圖片想刪掉都不行，必須把整個彈窗都關掉，如果已經上傳了很多張是比較蛋疼的。另一個問題是插件對圖片上傳接口返回參數有限制，必須是這么寫，但后端大佬實在沒空改，只能自己動手改源碼了。
先來看看怎樣給上傳的縮略圖增加刪除按鈕：
插件原來是沒有這個小叉叉的，改源碼需要做到三件事：
a、添加一個小叉叉按鈕
b、點擊叉叉刪掉縮略圖UI
c、如果這張圖已經上傳成功，即使縮略圖UI刪掉了，點確定還是會插入編輯器中，這里也要處理
如何添加叉叉按鈕？
打開“dialogs/image/image.js”文件，大概在738行有個監聽上傳成功的函數，如下：
紅框內的代碼就是我添加的刪除按鈕，css樣式這里就不寫了，可以自定義，當然這段代碼跟你的還有些許不一樣，后面再說。這段代碼就是根據圖片成功與否做的監聽，我們在上傳成功和失敗的情況下都要添加刪除按鈕。還有一種情況就是選擇了圖片不上傳，這種情況也是應該能刪除的，插件已經做了。插件有個addFile函數，作用是 “當有文件添加進來時執行，負責view的創建”，本來是想在這里增加刪除按鈕的，但會造成選圖而不上傳情況下的刪除按鈕重復。
如何實現點擊叉叉刪除縮略圖UI？
我這里是采用事件監聽方式實現的，在addFile函數下面增加了一個監聽函數，如下：
document.addEventListener("click", function (event) {
var target = event.target.getAttribute("data-hook")
if (target && target.toLowerCase() === 'closeoversizeimg') {
var delNode = event.target.parentNode, parentNode = delNode.parentNode
var imgUrl = $(delNode).find('img').attr("_src")
var imgIndex = 10000000000000
_this.getInsertList().forEach(function (item, index) {
if(item.src.indexOf(imgUrl) > -1) {
imgIndex = index
}
})
_this.imageList.splice(imgIndex, 1) // 刪除數據
removeFile(delNode) // 刪除UI
}
}, false)
這段代碼實現了兩個功能，刪除UI及刪除imageList中對應的數據
刪除imageList中對應數據的目的，就是防止UI圖刪除之后，點擊確定按鈕依然會把圖片插入編輯區。
插件有個imageList屬性，這個屬性中存放的就是即將要插入編輯區的圖片。刪除這個數據並不是件容易的事，因為縮略圖UI和imageList之間沒有直接的對應關系，插件本身就沒這功能，要命的是vue把圖片的src給轉成了base64編碼，導致我無法直接根據圖片地址進行比較，經過試驗我采用的方法是這樣的。
還是那個監聽上傳成功的那段代碼：
當你選擇圖片后，插件就會渲染縮略圖UI，我的處理方法是上傳成功后給img元素增加一個_src屬性，這個屬性就是后端返回的圖片路徑，然后把這個路徑跟imageList中的數據進行對比，如果一致就刪除，你可以往上翻翻，找到那段
document.addEventListener("click", function (event) { // .... }）
代碼，里面就是這么做的。
最后再順便說下，插件是根據{state： 'success'}，來判斷圖片是否上傳成功的，如果你們后端返回的不是這個，自己改下監聽程序即可，就是下面這段代碼：
