前段時間對 element-ui 進行了一次改造 4天快速落地團隊內部的UI組件庫，在改造 el-upload 這個組件時，遇到了一些問題，官方文檔寫的比較簡單，對剛接觸這個組件的人來說並不友好，如果不看源碼真不知道是幹啥用的。「文檔弱」似乎是國內的通病，包括看小程序的文檔，都是這樣的，大多數都是一筆而過，搞得開發者一臉懵逼。
el-upload 主要由 3 塊組成：
第一部分：文件選擇
文件選擇部分是通過對 input 標籤進行封裝，可以看下源碼：
<input type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>對外提供了如下屬性：
name：上傳時的文件名，也是 input 標籤的 name 屬性值；
drag：是否可以支持拖拽選擇文件；
accept：都可以選擇哪些類型的文件，比如選擇圖片；
multipe：是否支持選擇多個文件；
limit：最大允許選擇的文件個數；
auto-upload：選擇完文件是否自動開始上傳；
disable：是否阻止用戶選擇文件；
on-exceed：當用戶選擇的文件個數，超出 limit 屬性定義的值時觸發的回調；
第二部分：上傳服務
選擇完文件即可進行上傳處理，上傳服務其實是通過對XMLHttpRequest 進行了封裝，實現文件上傳。
在文件上傳之前可以設置一些參數：
action：上傳地址，也就是後端提供的上傳服務地址；
headers：http 請求時用到的請求頭；
data：http 請求需要用到的額外參數；
with-credentials：發送 cookie 憑證信息；
http-request：開發者自己提供上傳服務；
在上傳的過程中可以監聽到上去期間的各個事件：
on-success：文件上傳成功回調；
on-error：文件上傳失敗回調；
on-progress：文件上傳時進度的回調；
before-upload：在文件上傳時，可以告知 el-upload 是否允許本次的上傳，可支持 Promise；
第三部分：上傳列表
用戶上傳文件後，el-upload 提供了一個列表用來顯示上傳的結果。可通過下面這些屬性對上傳列表進行幹預：
list-type：文件列表的樣式，目前提供了 3 種樣式，分別為：text、picture、picture-card；
show-file-list：是否顯示上傳列表；
on-preview：點擊上傳列表中某個文件時觸發的回調；
on-remove：文件列表移除文件時的回調；
before-remove：是否阻止文件刪除；
提供了 2 個 slot
slot 的作用是能夠讓使用者更大程度地定製 UI：提供了 3 個方法：
這些方法其實是給 vue 組件提供的方法，要想調用方法，必須獲得組件的實例，可通過 ref 來獲取組件的實例，關於 ref 的使用可以看我前面寫的文章 refs - 訪問DOM或組件實例。clearFiles：清空已上傳的文件列表（該方法不支持在 before-upload 中調用）；寫在最後
el-upload 在處理上傳列表方面並不靈活，比如上傳過程中自動把上傳失敗的文件刪除掉，大多數場景需要自定義上傳列表，比如有個需求，文件上傳前，UI 是這樣的：
當有文件時，UI 是這樣的：
遇到這個需求不得不自定義上傳列表。這時就體現出了基於 element-ui 打造私有 UI 庫的好處，可以隨便玩。長按關注
幫助 10W 人入門並進階前端
官網：https://lefex.gitee.io/