element实现文件的暂缓上传

一.实现

        <el-form-item prop="loginName">
          <el-upload
            ref="upload"
            class="upload-demo"
            :action=""  //文件上传路径
            :file-list="fileList" //文件暂时存放的数组
            :auto-upload="false"  //关闭自动上传
            :on-remove="handelRemove"
            :show-file-list="true"
            :on-success="uploadSuccess"
            :data="{
              quarter:this.InputForm.quarter,
              dataType:this.InputForm.dataType
            }"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button> 
            <div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
          </el-upload>
        </el-form-item>

  data() {
    return {
      fileList: [],
      sendTime: "", //当前时间
      formLabelWidth: "120px",
      visible: false,
      loading: false,
      InputForm: {
        quarter: "",
        dataType: ""
      }
    };
  },

  methods: {
    submitUpload() {
      this.$refs.upload.submit(); //文件上传到服务器
      this.visible = false;
    },

二、效果