VUE 点击按钮导入file文件

1:

 

 2:

 

 

3:

 

 代码：

<template>
  <div class="btn_box">
    <input type="file" accept=".xls" ref="filebox" id="fileinput" style="display: none;" @change="checkFileSure">
    <el-button @click='checkFile'>
      <svg class="icon icon-back" aria-hidden="true">
        <use xlink:href="#icon-daoru1"></use>
      </svg>交付需求导入
    </el-button>
  </div>
</template>

<script>
  import { deliveryPlan_PlanImportNotice  } from "../../../api/APSAPI/ScheduleManagement";
  export default {
    name: "demo",
    data() {
      return {
        fileName: '',
        uploadForm: new FormData(),
      }
    },
    watch: {

    },
    created() {

    },
    methods: {
      // 导入按钮点击事件
      checkFile() {
        document.querySelector('#fileinput').click()
      },
      // 选择的文件
      checkFileSure(val) {
        console.log(document.querySelector('#fileinput').files[0]);
        this.fileName = document.querySelector('#fileinput').files[0].name;
        this.$forceUpdate();

        //确认提示
        this.$confirm('确认导入"' + document.querySelector('#fileinput').files[0].name + '"吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {

        }).then(() => {
          console.log('导入上传数据');
          this.uploadForm.append('file', document.querySelector('#fileinput').files[0]);
          //调用接口-----------------------------------------------------
          deliveryPlan_PlanImportNotice(this.uploadForm).then(response => {
            console.log('导入返回结果')
            console.log(response)
            this.msgSuccess("导入完成");
            this.$refs.filebox.value = '';
            this.uploadForm = new FormData()
          }).catch(error => {
            this.$refs.filebox.value = '';
            this.uploadForm = new FormData()
            this.msgError('导入失败');
          });
          //end-----------------------------------------------------
        }).catch(() => {
          document.querySelector('#fileinput').value = '';
          this.$refs.filebox.value = '';
          this.uploadForm = new FormData()
          console.log(document.querySelector('#fileinput').files[0]);
          this.fileName = "";
        });
      },
    }
  };
</script>