Vue实现Excel本地下载及上传的方法详解_vue.js_

+
上传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; } },