Vue + ElementUI 实现文件上传

vue版本：2.6.14
ElementUI版本：^2.15.6

场景描述：
在开发业务中想要实现EXCEL单文件上传，不想要 ElementUI 中 upload 组件的自动上传，而是上传文件到临时变量中，最后再通过上传按钮将文件上传至后端对应接口。

关键代码如下：

<template>
...
<el-upload class="upload-excel" ref="upload" action="#" accept=".xlsx,.xls" :limit="1" :http-request="handleUploadFile">
          <span class="tag">数据文件</span>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

<el-button class="btn-sure" type="primary" @click="uploadFile">确认上传</el-button>
...
</template>

<script>
export default {
  ...
  data() {
    return {
      dataFile: {}
    }
  },
  ...
  methods: {
    // 文件上传
    async uploadDataModel() {
      // 调用对应文件上传接口
      const { data: res } = await sendUploadRequest(this.dataFile);
      ...
    },
    // 文件提交
    handleUploadFile({ file }) {
      this.dataFile = new FormData();
      this.dataFile.append('file', file);
    }
  }
}
</script>

注意点：

1. action 属性必填，官方规定，因为想要手动点击上传按钮再上传，所以这里没有填写接口地址，随便填写一个字符串即可。
2. 由于想要实现单文件上传，所以需要 :limit="1" 限制文件上传个数。
3. 使用 :http-request 来覆盖 el-upload 的默认上传行为，这里我只需要拿到上传的文件，然后存储在一个临时变量中即可（file 文件需要封装到 FormData 再传给后端，后端使用的是 MultipartFile 接收的文件）
4. 上面的 { file } 是采用了解构取值，等同于：

handleUploadFile(fileObj) {
   this.dataFile = new FormData();
   this.dataFile.append('file', fileObj.file);
}