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：
trigger：可定制触发选择文件时的UI ；
tip：可定制文件选择时的提示信息；
提供了 3 个方法：
这些方法其实是给 vue 组件提供的方法，要想调用方法，必须获得组件的实例，可通过 ref 来获取组件的实例，关于 ref 的使用可以看我前面写的文章 refs - 访问DOM或组件实例。
clearFiles：清空已上传的文件列表（该方法不支持在 before-upload 中调用）；
abort：取消上传请求；
submit：手段上传文件列表；
关于这 3 个方法的实现，可以看源码：
写在最后
el-upload 在处理上传列表方面并不灵活，比如上传过程中自动把上传失败的文件删除掉，大多数场景需要自定义上传列表，比如有个需求，文件上传前，UI 是这样的：
当有文件时，UI 是这样的：
遇到这个需求不得不自定义上传列表。这时就体现出了基于 element-ui 打造私有 UI 库的好处，可以随便玩。