vue2+element ui 导入和导出后端传过来的文件

结合element-ui Upload 上传组件（官网地址：https://element.eleme.io/#/zh-CN/component/upload）

导入/上传

默认版：只需填入地址参数即可实现导入

<el-upload action="(后端给的api地址：eg：http://192.168.1.1/importOrder)" multiple :show-file-list="false" class="upload-btn"><el-button size="small" type="primary">导入</el-button>
</el-upload>

自定义版：

vue页面部分

<el-upload ref="uploadfiles" action="#" :http-request="Upload" :multiple="false" :show-file-list="false" class="upload-btn"><el-button size="small" type="primary">导入</el-button>
</el-upload>

js部分

Upload(params) {const file = params.file// 根据后台需求数据格式const form = new FormData() // 如果new FormData()声明变量form在data里，文件会叠加导入// 文件对象form.append('file', file)importOrder(form).then(response => {if (response.data.msgCode === -1) {// 上传失败提示this.$message({message: response.data.msgInfo,type: 'error',duration: 0,showClose: true})} else {// 上传成功提示this.$message({message: response.data.msgInfo,type: 'success'})this.$refs.uploadfiles.clearFiles() // 清空文件列表}}).catch(err => {console.log(err)})
}

导出/下载

vue页面部分：

<el-button type="primary" size="small" @click="DownTemplate">下载</el-button>

js部分：

// 封装一个下载函数
handleDownload(response) {const blob = new Blob([response.data], {type: 'application/file'})const url = window.URL.createObjectURL(blob)const a = document.createElement('a')a.href = urlconst patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')const contentDisposition = decodeURI(response.headers['content-disposition'])const result = patt.exec(contentDisposition)const fileNames = result[1].replace(/\"/g, '')a.download = fileNamesa.click()
},
// 使用
DownTemplate() {downloadTemplate().then(response => {this.handleDownload(response)
})
},

api js文件

// 导入
export function importOrder(params) {return request({url: '/importOrder',method: 'post',headers: { 'content-type': 'multipart/form-data' },data: params})
}
// 导出
export function exportOrder(params) {return request({url: '/exportOrder',method: 'post',responseType: 'blob',data: params})
}

vue2+element ui 导入和导出后端传过来的文件相关推荐

Vue2.x + element ui 导入导出excel
实现内容: 导入excel文件最终将其展现在页面table中将页面table中的表格转换为excel文件仓库地址: 完整代码在这里:https://github.com/Nigo-yyy/vue- ...
vue2+element ui
后端人员开发前端vue. git地址:https://github.com/1065744299/vue-elment-ui 演示地址:https://1065744299.github.io/ cs ...
vue+element实现导入和导出excel
自己最近在做一个地图的项目,需要导入excel的相关数据,处理为json之后通过接口发给strapi,网上也查看了许多资料,想借助这个机会也整理一下如何实现该功能引入工具库 npm install ...
linux下导入、导出mysql数据库命令下载文件到本地
一.下载到本地 yum install lrzsz sz filename 下载 rz filename 上传 linux下导入.导出mysql数据库命令一.导出数据库用mysqldump命令( ...
vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）
目录前言步骤: 1.下载xslx 2.导入xslx 3.template中给个点击事件 4.methods中定义函数实现导出前言本篇文章记录纯前端导出下载文档功能. 若想查看从后端接收文件流, ...
Vue 前端导出后端返回的excel文件
<Card class="mt20" title="设备数据"><div slot="extra"><a cl ...
EasyExcel导入、导出合并单元格excel文件
原文地址:https://blog.csdn.net/weixin_42195311/article/details/110441885 <!--版本最好大于2.2.6,版本太低会导致没有ext ...
Element UI 按需引入注意事项，.babelrc 文件修改问题
注意按需引入是可以改标签名字注意最新版的vue脚手架已经将 .babelrc 改为了babel.config.js 要在babel.config.js文件里写:注意最新版脚手架
element ui - el-select 添加可输入功能
element ui - el-select 可以支持输入功能场景思路方法场景 vue2 + element ui 的项目中,产品希望 el-select 可以支持输入功能,也就说用户既可以下 ...

vue2+element ui 导入和导出后端传过来的文件

导入/上传

默认版：只需填入地址参数即可实现导入

自定义版：

导出/下载

api js文件

vue2+element ui 导入和导出后端传过来的文件相关推荐

最新文章

热门文章