最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue实现Excel本地下载及上传教程
时间:2022-10-12 编辑:坚强 来源:一聚教程网
本文为小伙伴们介绍的是关于Vue实现Excel本地下载及上传教程,感兴趣的小伙伴一起来看看吧。
相信大家在项目中经常会遇到一些上传下载文件的相关功能,本文就Excel的相关功能进行简述:
咱直接看代码:
{{ fileName }}尚未选择文件!注意:1. 请按照Excel表格模板内字段格式进行上传2. 导入表格数量控制在10000条以内3. Excel表格模板点击下载:Excel表格模板
data () { return { fileName: "", //Excel文件 fileDir: "", //Excel文件路径 } }, checkFile() { document.querySelector("#fileinput").click(); }, checkFileSure() { let fileObj = document.querySelector("#fileinput").files[0]; let file = document.querySelector("#fileinput"); if (fileObj) { this.fileName = fileObj.name; // 文件类型 let fileType = fileObj.type; let fileSize = fileObj.size; // 文件大小 if ( !( fileType === "application/vnd.ms-excel" || fileType === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ) ) { this.msgError("上传文件仅支持 Excel 格式!"); file.value = ""; return false; } else if (fileSize / 1024 / 1024 > 50) { this.msgError("文件大小超过50M!"); file.value = ""; return false; } this.importDone(); } else { this.$message.error("请选择导入的excel文档!"); return false; } }, //下载Excel模版 downLoadModel() { //getImportTempFile4Prize 为下载excel 模板接口 getImportTempFile4Prize().then((res) => { window.location.href = `${this.$store.state.weShop.IMGHEAD}${res.URI}`; }); }, importDone() { if (this.fileName == null || this.fileName === "") { this.$message.error("请选择导入的excel文档!"); return; } let fileObj = document.querySelector("#fileinput").files[0]; console.log(fileObj.name); let file = document.querySelector("#fileinput"); console.log(file); if (fileObj?.name) { let formData = new FormData(); formData.append("file", fileObj); formData.append("upload_type", "02"); let fileType = fileObj.type.split("/")[1]; // uploadExcel 为后台上传Excel 接口 uploadExcel(formData, fileType) .then((res) => { file.value = ""; this.fileDir = res.PATH; this.form.PRIZE_NUM = res.NUM; }) .catch(() => { file.value = ""; }) .then((res) => {}); document.querySelector("#fileinput").value = ""; } else { this.$message.error("请选择导入的excel文档!"); document.querySelector("#fileinput").value = ""; this.fileName = ""; return false; } },
以上逻辑在后台接口,前端主要做的是一些简要的操作,需要上传Excel的话需要先上传到服务器才行。
以上就是关于Vue实现Excel本地下载及上传教程的全部内容了,感兴趣的小伙伴记得点击关注哦。
-
上一个: vue实现列表无缝循环滚动
-
下一个: React父组件调用子组件中的教程
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12