导入excel

导入excel

1.其本质也是用到upload组件，这里主要是方便找到一个合适的实现逻辑

html如下：

 <fks-upload
            :action="uploadUrl"
            drag        //是否启用拖拽上传
            name="file"  //上传的文件字段名
            :headers="{
              'Fawkes-Auth': ACESS_TOKEN,
            }"
            :with-credentials="true"  //支持发送 cookie 凭证信息
            :auto-upload="false"  //是否在选取文件后立即进行上传
            :limit="1" //最大允许上传个数
            accept=".xlsx" //接受上传的文件类型（thumbnail-mode 模式下此参数无效）
            :file-list="fileTempList"
            :http-request="importData" //覆盖默认的上传行为，可以自定义上传的实现
            ref="upload"
          >
            <i class="fks-icon-upload"></i>
            <div class="fks-upload__text">
              将文件拖到此处，或，
              <em>点击上传</em>
              <br />
              <span>支持.xlsx格式</span>
            </div>
          </fks-upload>
                  <fks-button @click="submitData" type="primary" icon="fks-icon-check">
          <span style="margin-left: 4px">保存</span>
        </fks-button>

data中的数据

data{
 fileTempList: [],
}

2.逻辑代码
js:

    //关闭导入
    cancelImport() {
      this.importVisible = false;
      this.fileTempList = [];
    },
    //提交导入
    submitData() {
      this.$refs.upload.submit();   //调用该实例的方法手动上传
      this.cancelImport();
    },
     //覆盖默认的上传行为，可以自定义上传的实现
    importData(params) {
      // 根据后台需求数据格式
      let form = new FormData();
      // 文件对象
      form.append("mu", params.file);
      
      //importData是接口函数
      importData(form).then((res) => {
        if (res.status) {
          let tableData = res.data;
          this.tableData.unshift(tableData);
          this.$message.success("导入成功！");
        }
      });
    },