vue可以多次导入吗_vue项目下的导入和导出

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

导入

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

class="upload-input"

@change="fileChange($event)"

name="files"

type="file"

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"

/>

type="primary"

ghost

style="margin-left:40px"

icon="ios-cloud-upload-outline"

>点击上传Excel文件

{{fileName}}

文件小于10M，内容需符合模板规范

导入文档前请先添加好相应的类目

下载规范模板

取消

确定

通过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请求，那么上面的方法就不合适，通用的请求会出现乱码，大多数情况下我们会使用表单提交的方法

创建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();

}

导出的方法中使用

// 确认导出

exportOk () {

// 根据label获取id

......

// 请求导出

this.formSubmit(

{

kgId: this.kgId,

status: this.status,

categoryIds: this.categoryIds.join('|')

},

this.exportUrl

);

}