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

谁借莪１个温暖的怀抱￠ 2023-10-15 14:39 36阅读 0赞

#### 简介：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)

##### **局部引入，在这里：** #####

[局部引入![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://element.eleme.cn/\#/zh-CN/component/quickstart][icon-default.png_t_N7T8_icon-default.png_t_N7T8_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属性方法![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://element.eleme.cn/\#/zh-CN/component/upload][el-upload_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_element.eleme.cn_zh-CN_component_upload]

##### **创作不易，感觉有用，就一键三连，感谢(●'◡'●)** #####

[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_element.eleme.cn_zh-CN_component_quickstart]: https://element.eleme.cn/#/zh-CN/component/quickstart
[el-upload_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_element.eleme.cn_zh-CN_component_upload]: https://element.eleme.cn/#/zh-CN/component/upload