最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， 点击查看源码。
我是自己维护了一个列表数据，再对这个列表数据进行一些操作，没用组件自带的。先看看我的组件模版
<template>
<el-upload
class="upload-demo"
:limit="limit"
:action="action"
:accept="accept"
:data="data"
:multiple="multiple"
在Vue CLI 3.0项目中，Element-UI的上传组件`el-upload`是一个非常实用的工具，用于处理各种文件上传需求。以下是对这个组件的详细解析和使用方法。
`el-upload`组件提供了丰富的属性来满足各种限制条件：
1. `limit`: 用于限制用户可上传的文件数量，例如`:limit="20"`表示最多允许上传20个文件。
2. `action`: 指定文件上传的API地址，可以通过`axios`或其他HTTP库进行定制。
3. `accept`: 可以指定允许上传的文件类型，如`:accept=".jpg, .png"`仅允许上传.jpg和.png格式的图片。
4. `data`: 上传文件时可以附加额外的请求参数。
5. `multiple`: 如果设置为`true`，则支持多选文件上传。
6. `show-file-list`: 控制是否显示文件列表，默认为`true`，若设置为`false`则不显示。
7. `with-credentials`: 设置为`true`，在发送请求时携带cookie。
8. 还有其他一些属性，如`:on-exceed`, `:before-upload`, `:on-progress`, `:on-success`, `:on-error`等，它们是事件处理函数，用于在不同阶段执行自定义逻辑。
在事件处理函数中，我们可以实现特定的业务逻辑：
1. `handleExceed`: 当文件超过预设限制时触发。例如，当上传的文件数量超过20个时，弹出错误提示并阻止继续上传。
2. `handleBeforeUpload`: 在文件上传前执行，可以进行文件大小和类型的验证。如果不符合要求，返回`false`阻止上传。在这个例子中，文件大小不能超过5MB，且文件类型需符合`accept`属性设置的规则。
3. `handleProgress`: 文件上传过程中，更新进度条的值。利用此函数可以实时反馈上传进度，例如通过计算百分比并更新对应文件的进度值。
4. `handleSuccess`: 文件上传成功后调用，通常会处理返回的响应数据，例如将文件信息添加到列表中，或者进行其他业务处理。
5. `handleError`: 文件上传失败时执行，可以展示错误信息或执行其他异常处理逻辑。
在模板中，我们通常会结合`el-button`组件一起使用`el-upload`，以提供一个用户友好的上传界面。例如：
```html
<template>
<el-upload
class="upload-demo"
:limit="limit"
:action="action"
:accept="accept"
:data="data"
:multiple="multiple"
:show-file-list="showFileList"
:on-exceed="handleExceed"
:with-credentials="withCredentials"
:before-upload="handleBeforeUpload"
:on-progress="handleProgress"
:on-success="handleSuccess"
:on-error="handleError">
<el-button size="small" type="primary">上传</el-button>
</el-upload>
</template>
```
在实际项目中，通常会自定义一个数据结构（如`tempArr`）来存储上传文件的信息，以便在不同阶段进行操作和管理。这样，即使没有使用组件内置的文件列表，也能实现类似的功能，并具有更高的灵活性。
Element-UI的`el-upload`组件是Vue项目中处理文件上传的利器，通过配置它的属性和监听其事件，可以轻松实现各种复杂的上传需求，如限制文件大小、类型、数量，以及自定义上传列表和进度条等。
腻歪￥~2023-02-09资源使用价值高，内容详实，给了我很多新想法，感谢大佬分享~
