vue项目this.$refs唤起el-upload组件

<template>

  <section>

    <el-button v-if="fileName" type="text" @click="handelReplace" class="l-h-20">重新上传</el-button>

    <el-upload

      v-show="!fileName"

      class="upload-wrap m-r-5"

      ref="uploadBox"

      accept=".xlsx, .xls"

      :format="['xlsx','xls']"

      :on-format-error="handleFormatError"

      :before-upload="handelBeforeUpload"

      :on-remove="handelRemove"

      :http-request="uploadSectionFile"

      :show-file-list="false"

      :limit="1"

      drag

    >

      <div>将文件拖拽至此区域</div>

      <el-button type="text">上传文件</el-button>

    </el-upload>

  </section>

</template>

 

<script>

export default {

  data() {

    return {

      uploadURL: 'www.baidu.com',

      fileName: "",  // 文件名

      updateData: {} // 入参

    };

  },

  methods: {

    getExtension(fName) {

      return /[.]/.exec(fName) ? /[^.]+$/.exec(fName)[0] : undefined;

    },

    handelBeforeUpload(file) {

      let ext = this.getExtension(file.name);

      if (ext !== "xls" && ext !== "xlsx") {

        this.$message.error("请上传execl文件！");

        this.fileName = "";

        return false;

      } else {

        this.fileName = file.name;

      }

    },

    handelRemove(file, fileList) {

      this.fileName = "";

      this.updateData = {};

    },

    handleFormatError(file) {

      this.$message.error("文件格式不正确，请上传.xls,.xlsx文件。");

    },

    uploadSectionFile(params) {

      let reader = new FileReader();

      reader.readAsDataURL(params.file);

      reader.onload = async () => {

        this.updateData = {

          base64: reader.result.split(",")[1],

          ticket: "base64"

        };

        let { data, errmsg } = await this.$api.apiUrl(

          this.updateData

        );

        if (data) {

          this.$message.success("导入成功");

        } else {

          this.$message.error(errmsg);

        }

      };

    },

    handelReplace() {

      // 重新上传

      this.fileName = "";

      this.updateData = {};

      if (this.$refs.uploadBox) {

        this.$refs.uploadBox.clearFiles();

        this.$refs.uploadBox.$children[0].$refs.input.click();

      }

    }

  }

};

</script>