elementUpload función de carga del componente

La función de carga del elemento es necesaria para satisfacer las necesidades del proyecto:
plantilla:

 <!-- 上传文件 -->
      <el-dialog
        title="导入表格"
        :visible.sync="uploadFileVisible"
        width="30%"
        :append-to-body="true"
        @close="uploadFileClose"
      >
        <div>
          <el-upload
            drag
            :limit="limitNum"
            :auto-upload="false"
            accept=".xls"
            :action="UploadUrl()"
            :before-upload="beforeUploadFile"
            :on-change="fileChange"
            :on-exceed="exceedFile"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传xls文件，且不超过10M
            </div>
          </el-upload>
          <br />
          <el-button size="small" type="primary" @click="uploadFile"
            >立即上传</el-button
          >
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadFileVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadFile">确 定</el-button>
        </span>
      </el-dialog>

datos:

      // 上传文件列表
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [], // excel文件列表
      //上传文件对话框
      uploadFileVisible: false,

métodos:

 // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
    
    
      this.$message.warning(
        `只能选择 ${
      
      this.limitNum} 个文件，当前共选择了 ${
      
      
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
    
    
      console.log(file);
      console.log(file.raw);
      this.fileList.push(file.raw);
      console.log(this.fileList);
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
    
    
      console.log("before upload");
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xls") {
    
    
        this.$message.warning("只能上传后缀是.xls的文件");
      }
      if (size > 10) {
    
    
        this.$message.warning("文件大小不得超过10M");
      }
    },
    UploadUrl: function () {
    
    
      // 因为action参数是必填项，使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action
      // 设置为一个返回为空的方法，避免抛错
      return "";
    },
    uploadFile() {
    
    
      if (this.fileList.length === 0) {
    
    
        this.$message.warning("请上传文件");
      } else {
    
    
        let form = new FormData();
        console.log("数组的第一项", this.fileList[0]);
        form.append("file", this.fileList[0]);
        this.$http({
    
    
          method: "post",
          url: "/data/table/upload",
          data: form,
          params: {
    
     userId: this.userId, tableName: this.table_info.name },
        })
          .then((res) => {
    
    
            console.log(res);
            if (res.data.code == 200) {
    
    
              this.$message.success("成功导入表格");

              this.getTableInfo();
            } else {
    
    
              this.$message.error("导入表格失败");
            }
          })
          .catch((err) => {
    
    
            console.log(err);
          });
      }
      this.uploadFileVisible = false;
    },
    //导入表格对话框关闭
    uploadFileClose() {
    
    
      this.fileList = [];
    },