el-upload在有后端上传接口的情况下导入Excel

   <el-dialog title="批量导入" :visible.sync="importDialog" class="dialog-md" width="600px">
      <el-form :model="importList" label-position="left" label-width="100px" style="width: 70%">
        <el-form-item label="">
          <el-upload
            ref="upload"
            class="uploadDialog"
            action=""
            :http-request="httpRequest"
            :limit="1"
            :on-change="handleChange"
            :file-list="fileList"
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
            <!-- <div v-show="importDialog" slot="tip">
              <p>上传成功！</p>
              <p>
                有效:
                <span style="color: rgb(51, 153, 204)"></span>
                {{ uploadResult.validCount }} 条
                <span style="color: red">无效:{{ uploadResult.invalidCount }}</span>
                重复:{{ uploadResult.reiteratedCount }}
              </p>
            </div> -->
            <div class="el-upload__tip">
              1、首次导入请
              <a :href="'优招后台账号导入模板.xlsx'" style="color: rgb(24, 144, 255); cursor: pointer" target="_blank" download="优招后台账号导入模板.xlsx">
                点击下载
              </a>
              导入模板
            </div>
            <div class="el-upload__tip">2、 仅支持上传大小5M以内的excel文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="importDialog = false">取消</el-button>
        <el-button type="primary" size="small" @click="upload()">上传</el-button>
      </span>
    </el-dialog>

js

// 显示导入数据弹框
    showImportDialog() {
      this.importDialog = true
    },
    // 导入数据弹框关闭之前的钩子
    handleClose() {
      this.importDialog = false
    },
    importChange(file) {
      this.importInput.ExcelFile = file
    },
    //  监听改变
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 移除
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 自定义上传Excel方法
    async httpRequest(param) {
      this.importInput.ExcelFile = param.file // 相当于input里取得的files
      const fd = new FormData() // FormData 对象
      fd.append('ExcelFile', this.importInput.ExcelFile)
      fd.append('OperatorId', this.importInput.OperatorId)
      fd.append('OperatorName', this.importInput.OperatorName)
      fd.append('OperatorMobile', this.importInput.OperatorMobile)
      fd.append('OperatorRole', this.importInput.OperatorRole)
      fd.append('CollegeMenuName', this.importInput.OperatorRole)
      const res = await importData(fd)

      if (res.isSuccess) {
        this.$refs.upload.clearFiles()
        this.importDialog = false
        this.$message.success('导入成功')
        this.handleClearSelectRole()
      } else {
        this.$message.error(res.message)
      }
    },
    // 上传Excel
    upload() {
      if (this.$refs.upload.uploadFiles.length === 0) {
        this.$message.error('请上传文件')
        return
      }
      this.$refs.upload.submit()//submit会调用自自定义上传方法
    },