Vue 58 ，Element 6 ，el-upload 上传文件，Vue2 上传文件，Element中的 el-upload 文件上传

前言

在应用开发中，文件上传是一个非常常见的功能需求。无论是用户上传个人资料图片、文档，还是企业应用中的数据导入，都需要一个直观且易于使用的文件上传组件。Vue 2 结合 Element UI 提供了 el-upload 组件，它是一个强大且灵活的文件上传解决方案，能够帮助我们快速实现文件上传功能。
el-upload 是 Element UI 中的一个核心组件，专为处理文件上传而设计。它不仅支持基本的文件选择和上传功能，还提供了丰富的配置选项和事件钩子，使得我们可以轻松定制上传流程，满足各种业务场景的需求。

一. 安装插件

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

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

---

二. 引入注册

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

---

四. 组件使用

然后，可以再在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"			//上传事件


        name="files"                        // 用于指定上传文件字段的名字
                                            // 看后端需要传递的参数，是否需要更改


//在data中配置相关属性
    return {
      // 上传文件的请求头
      headers: {}, 
      // 上传文件的请求地址
      upload_url: process.env.VUE_APP_BASE_API + "/file/upload",
    },


//在created函数中获取请求头
   created() {
    const Authorization = store.getters.access_token
    // console.log(Authorization);
    // 看接口需不需要加Bearer，一般默认情况是需要加的 
    this.headers = { Authorization: `Bearer ` + Authorization };
    // this.headers = { Authorization: Authorization };
  },


//事件方法
 methods: {
     // 上传事件
    handleSuccess(file) {
      // console.log(file);
      const data = file.data;
      //数据、逻辑处理
    },
},

这里最重要的就是，需要配置请求头，配合 token 授权，然后上传。

---

五. 属性方法

1. 常见属性

这里列举下 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 :       文件列表的展示方式

2. 更多属性

el-upload的更多属性，请看

el-upload属性方法https://element.eleme.cn/#/zh-CN/component/upload