el-upload upload file (vue2, el-upload file upload in Element)

Introduction: el-upload is an upload component based on Element UI. Everyone should know that it can easily implement the file upload function. Today we will record how to use el-upload to upload files (in vue2).

1. First, if we want to use el-upload, we need to install the Element UI dependency in the project. You can install it through npm, and then use global import or local import to ensure that the component can be used in the project. I will not introduce it here;

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

2. After the installation is completed, introduce it globally in main.js and use it;

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Local introduction, here:

Partially introduced https://element.eleme.cn/#/zh-CN/component/quickstart

3. Then you can use it directly in the Vue component. The following is an example of using the el-upload component;

    <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;
      //数据、逻辑处理
    },
},

The most important thing here is that you need to configure the request header, cooperate with token authorization, and then upload it.

4. Here are the common attributes and methods of the el-upload component:
- action: the address of the uploaded file
- on-change: the method triggered when the file list changes
- before-upload: the method before uploading the file, which can be used to verify the file Type and size, etc.
- file-list: list of uploaded files
- on-remove: method triggered when the file is removed
- on-progress: method triggered when the file upload progress changes
- on-success: when the file upload is successful Triggered method
- on-error: method triggered when file upload fails
- headers: request headers that need to be carried when uploading files
- data: other data that need to be carried when uploading files
- multiple: whether to support multiple selection of files
- accept: can be uploaded file type
- disabled: whether to disable the upload function
- limit: the maximum number of files that can be uploaded
- drag: whether to support drag and drop uploading
- list-type: how to display the file list

For more attributes of el-upload, see:

el-upload attribute method https://element.eleme.cn/#/zh-CN/component/upload

It is not easy to create, but if you feel it is useful, just click three times, thank you (●'◡'●)