el-upload上传文件

el-upload组件是一个基于Element UI的文件上传组件，可以使用它来上传文件并与后端进行交互。

使用自带的方式文件上传

主要属性：action，headers

<template>
  <el-upload
    ref="reupload"
    class="upload-icon"
    :action="uploadUrl"
    :headers="headers"
    :before-upload="beforeFileUpload"
    :show-file-list="false"
    :drag="drag"
    :on-success="handleFileSuccess"
    :on-error="handleFileFail">
    <el-button slot="trigger">选取文件</el-button>
    <el-button style="margin-left: 10px;" type="primary" icon="el-icon-upload">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传地址'
    }
  },
  methods: {
    beforeFileUpload(file, fileList) {
      // 自定义上传逻辑
      return false; // 阻止上传
    },
    handleFileSuccess({data}) {
      // 成功的回调
    },
    handleFileFail() {
      // 失败的回调
    },
  }
}
</script>

1. before-upload方法：主要用来进行上传文件的格式和大小的验证处理。
2. action属性：指引我们使用后端的接口地址。默认进行二进制流的上传工作。
3. headers属性：设置上传的请求头信息。因为正常情况下，和后端交互需要携带token信息，就需要我们通过这个属性携带。

可以实现最基础的文件上传。简单快速直接。