vue 导入功能

     <el-dialog
          :title="upload.title"
          :visible.sync="upload.open"
          width="550px"
          append-to-body
        >
  <!-- value-key=id -->
  <el-form ref="uploadFrom" :model="formexport" label-width="100px">
    <el-form-item label="系统日志id">
      <el-select
        @change="selectSystem($event)"
        v-model="formexport.systemName"
        placeholder="系统日志id"
        clearable
      >
        <el-option
          v-for="(log, index) in systemLogList"
          :key="index"
          :label="log.systemName"
          :value="log.systemName"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="导入文件">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="
          upload.url +
          '?updateSupport=' +
          upload.updateSupport +
          '&systemId=' +
          upload.systemId
        "
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />
          是否更新已经存在的用户数据
          <el-link
            type="info"
            style="font-size: 13px"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitFileForm">确 定</el-button>
    <el-button @click="upload.open = false">取 消</el-button>
  </div>
</el-dialog>


loadding: null,
upload: {
    // 是否显示弹出层
    open: false,
    // 弹出层标题
    title: "",
    systemId: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: false,  0 1 true false  跟后端定义好
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址，请求地址
    url: process.env.VUE_APP_BASE_API + "/xxx/XX/importData",
  },
  
   //下载模板
importTemplate() {
  this.download(
    "/xxx/xx/importTemplate",
    {},
    `导入表${new Date().getTime()}.xlsx`
  );
},
 /** 导入按钮操作 */
handleImport() {
  // 如果弹框中系统日志有数据清空
  if (this.formexport.systemName) {
    this.formexport.systemName = "";
  }
  listSystem({ pageSize: 999999 }).then((res) => {
    this.systemLogList = res.rows;
  });

  this.upload.title = "用户导入日志";
  this.upload.open = true;
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
  this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  this.upload.open = false;
  console.log("response", response);
  console.log("file", file);
  this.formexport.systemId = null;
  console.log("fileList", fileList);
  this.upload.isUploading = false;
  this.$refs.upload.clearFiles();
  //关闭loading
  this.loadding.close();
  this.$alert(
    "<div style='overflow: auto;overflow-x: hidden;padding: 10px 20px 0;maxHeight:70vh'>" +
      response.msg +
      "</div>",
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );

  this.getList();
},
// 提交上传文件
submitFileForm() {
//点击确定提交的时候有一个loadding提示
this.loadding = this.$loading({
    lock: true,
    text: "文件上传中...",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  this.$refs.upload.submit();
},