简介：el-upload是一个基于Element UI的上传组件，大家应该都知道，它可以方便地实现文件上传功能，今天来记录下如何（在vue2中）使用el-upload上传文件。
1、首先，我们想要使用el-upload，就需要在项目中安装Element UI依赖，可以通过npm安装，然后使用全局引入或局部引入，确保项目中可以使用该组件，这里就不多介绍；
npm install element-ui --save
或者
npm install element-ui2、安装完成后，在main.js中全局引入使用；
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)局部引入，在这里：
局部引入
https://element.eleme.cn/#/zh-CN/component/quickstart
3、然后可以再在Vue组件中，直接使用，下面是el-upload组件的一个使用实例；
<el-upload
class="upload-demo"
ref="upload"
:action="upload_url"
:show-file-list="false"
:auto-upload="true"
:headers="headers"
:on-success="handleSuccess"
>
<el-button
slot="trigger"
size="small"
type="primary"
>上传文件</el-button>
</el-upload>
:action="upload_url" //上传地址
:show-file-list="false" //不显示上传列表
:headers="headers" //token
:auto-upload="true" //选取文件后立即进行上传
:on-success="handleSuccess" //上传事件
//在data中配置相关属性
return {
// 上传文件的请求头
headers: {},
// 上传文件的请求地址
upload_url: process.env.VUE_APP_BASE_API + "/file/upload",
},
//在created函数中获取请求头
created() {
const Authorization = store.getters.access_token
// console.log(Authorization);
this.headers = { Authorization: Authorization };
},
//事件方法
methods: {
// 上传事件
handleSuccess(file) {
// console.log(file);
const data = file.data;
//数据、逻辑处理
},
},这里最重要的就是，需要配置请求头，配合token授权，然后上传。
4、这里列举下el-upload组件常用属性和方法：
- action : 上传文件的地址
- on-change : 文件列表发生改变时触发的方法
- before-upload : 上传文件之前的方法，可以用来验证文件类型和大小等
- file-list : 已上传的文件列表
- on-remove : 文件被移除时触发的方法
- on-progress : 文件上传进度发生改变时触发的方法
- on-success : 文件上传成功时触发的方法
- on-error : 文件上传失败时触发的方法
- headers : 上传文件时需要携带的请求头
- data : 上传文件时需要携带的其他数据
- multiple : 是否支持多选文件
- accept : 可上传的文件类型
- disabled : 是否禁用上传功能
- limit : 最多可上传的文件数量
- drag : 是否支持拖拽上传
- list-type : 文件列表的展示方式
el-upload的更多属性，详见：
el-upload属性方法https://element.eleme.cn/#/zh-CN/component/upload
