vue项目下的导入和导出

本篇博文主要记录我们在写项目的时候经常需要用到导入和导出。

导入

1. 首先定义一个模态弹窗，一般情况下会使用一个input(设置opacity:0)覆盖在显示的按钮上面

<!-- 3.导入 -->
    <Modal title="批量导入" v-model="importVisual" width="450px" class="page-open-question-import">
      <div class="import-btn">
        <input
          class="upload-input"
          @change="fileChange($event)"
          name="files"
          type="file"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        />
        <Button
          type="primary"
          ghost
          style="margin-left:40px"
          icon="ios-cloud-upload-outline"
        >点击上传Excel文件</Button>
        <span class="file-name" v-show="fileName" :title="fileName">{{fileName}}</span>
      </div>

      <div class="import-text">
        <span>文件小于10M，内容需符合模板规范</span>
        <span>导入文档前请先添加好相应的类目</span>
      </div>

      <div class="import-example" @click="download">
        <Icon type="ios-cloud-download-outline" />下载规范模板
      </div>

      <div slot="footer">
        <Button @click="importVisual=false">取消</Button>
        <Button type="primary" @click="importOk">确定</Button>
      </div>
    </Modal>

2. 通过type='file'的输入框获取到文件信息，一般情况下的导入接口使用的是formdata信息

    // 导入选择文件
    fileChange (el) {
      this.importFile = el.target.files[0];
      this.fileName = this.importFile.name;
    },

    // 确定导入
    importOk () {
      let param = new FormData();
      param.append('file', this.importFile);
      importData(param, {
        kgId: this.kgId
      }).then(res => {
        // 导入成功后操作
        ......
        this.importVisual = false;
        this.$Message.success('导入成功！')
      })
    },

导出

get 请求

一般情况下，我们可以直接使用window.open()的方法来导出后端提供的get请求；

    // 根据参数导出数据
    downloadModel () {
      window.open(
        `${httpConfig.baseURL}/kg/dataset/data/template/${this.datasetId}`
      );
    }

post 请求

有的接口因为传参比较多，会需要使用post请求，那么上面的方法就不合适，通用的请求会出现乱码，大多数情况下我们会使用表单提交的方法

1. 创建form表单请求的方法

    // 导出文件
    formSubmit (param, url) {
      var $form = document.getElementById('exportForm');
      if (!$form) {
        $form = document.createElement('form');
        $form.setAttribute('id', 'exportForm');
        $form.setAttribute('method', 'post');
        $form.style.display = 'none';
        document.getElementById('exportParent').appendChild($form);
      }
      $form.setAttribute('action', url);
      // 记得要把token信息带上
      let token = this.$cookies.get('access_token');
      param.access_token = token;

      for (var obj in param) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = obj;
        input.value = param[obj];
        $form.appendChild(input);
      }
      $form.submit();
    }

2. 导出的方法中使用

// 确认导出
    exportOk () {
      // 根据label获取id
      ......

      // 请求导出
      this.formSubmit(
        {
          kgId: this.kgId,
          status: this.status,
          categoryIds: this.categoryIds.join('|')
        },
        this.exportUrl
      );
    }