el-upload上传文件（vue2，Element中的 el-upload文件上传）

简介：el-upload是一个基于Element UI的上传组件，大家应该都知道，它可以方便地实现文件上传功能，今天来记录下如何（在vue2中）使用el-upload上传文件。

1、首先，我们想要使用el-upload，就需要在项目中安装Element UI依赖，可以通过npm安装，然后使用全局引入或局部引入，确保项目中可以使用该组件，这里就不多介绍；

npm install element-ui --save
或者
npm install element-ui

2、安装完成后，在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