vue表单中批量导入功能_vue+element-ui的简洁导入导出功能【包含上传到云】

前言

后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;

1.导入

1.1 el-upload组件

1.导入是利用element-ui的Upload 上传组件;

:action="importUrl"//上传的路径

:name ="name"//上传的文件字段名

:headers="importHeaders"//请求头格式

:on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据

:on-remove="handleRemove"//文件移除

:before-upload="beforeUpload"//上传前配置

:on-error="uploadFail"//上传错误

:on-success="uploadSuccess"//上传成功

:file-list="fileList"//上传的文件列表

:with-credentials="withCredentials">//是否支持cookie信息发送

1.2 原理：

里面对input进行了封装，并暴露一些方法和属性

1.3.ajax或者form上传？

可以设置http-request属性，覆盖默认的上传行为，可以自定义上传的实现

1.4 云端COS上传

这个一般还是很常见的，

原理是将文件存储到云端，返回一个存贮地址存在本地服务器，

cos存储过程：鉴权===分片上传===成功返回存储地址

tencent的cos存贮

2 导出

2.1 原理

导出是利用file的一个对象blob;

通过调用后台接口拿到数据,

然后用数据来实例化blob,

利用a标签的href属性链接到blob对象

2.2 代码示例1

导出方式是 get

//声明导出文件名对象

const fileNames={

1:'模板一',

2:'模板二',

3:'模板三',

4:'模板四',

}

export const downloadTemplate = function (scheduleType) {

axios.get('/demo/template', {

params: {

"demoType": demoType

},

responseType: 'arraybuffer'

}).then((response) => {

//创建一个blob对象,file的一种

let blob = new Blob([response.data