vue2+element自定义导入文件方法

一、样式

<el-dialog
      title="批量导入"
      :visible.sync="importFormVisible"
      width="30%"
      @click="closeDialog"
      ><el-form class="downloadBox">
        <el-form-item label="下载模板:">
          <el-button
            size="small"
            icon="el-icon-download"
            type="primary"
            @click="downloadExcel"
            >点此下载标准模板</el-button
          >
        </el-form-item>
        <el-form-item class="selectFile" label="导入模板:">
          <el-upload
            ref="upload"   //注意el-upload里一定要写ref
            multiple
            action="customize"
            :file-list="fileList"
            :auto-upload="false"
            :http-request="uploadFile"
          >
            <el-button size="small" type="success" icon="el-icon-upload"
              >将填好的Excel文件导入</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitUpload"
          >确认导入
        </el-button>
      </div>
    </el-dialog>

二、使用 :http-request自定义导入方法

data(){
return{
  fileList: [],  //文件
  }
}

    uploadFile(params) {
      let file = new FormData();
      file.append("file", params.file);
      importOverTime(file).then((res) => {
        if (res.status == 200) {
          this.$message.success(res.message);
          this.getdata(this.formInline);
          this.importFormVisible = false;
        } else {
          this.$message.info(res.message);
        }
      });
    },
    submitUpload() {
      this.$refs.upload.submit();  //注意el-upload里一定要写ref
    },