如何用Vue实现一个基础文件上传组件？

本文共计1428个文字，预计阅读时间需要6分钟。

这篇教程将介绍如何基于Vue和Element UI编写一个简单的文件上传控件。控件将包括以下功能：

1. 上传文件列表，显示文件名称、大小等信息，并实时显示上传进度。

2.支持取消上传。

使用Element UI的组件来实现这个控件，具体步骤如下：

1. 引入Element UI和Vue。

2.创建Vue组件，定义模板和样式。

3.使用Element UI的`el-upload`组件来创建上传控件。

4.配置上传控件的相关属性，如上传地址、文件列表等。

5.监听上传事件，处理上传进度和取消操作。

​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件。

控件将具有

1. 上传队列的列表，显示文件名称，大小等信息，可以显示上传进度实时刷新

2. 取消上传

​

使用Element的uploader控件，上传文件的行为和样式不用自己全部实现，使代码简化。且有足够的扩展性，文件传输请求的代码可以基于axios完全自己重写。我们只用关心核心代码。