Vue导入上传Excel

对Excel的数据进行上传首先需要使用xlsx
此文章的上传方式为手动上传（数据解析可在前端进行，也可交由后端处理）

安装插件      npm install xlsx
引入          import XLSX from ‘xlsx’

使用el-upload进行上传（el-upload在这不再做介绍）

<el-upload:show-file-list="true":headers="{ Authorization: token }"name="file":limit="1"accept=".xlsx,.xls"action="/admin/upload"   :on-change="handlePreview":on-exceed="handleExceed":on-error="handleError":on-success="handleUpload":auto-upload="false":data="{ standard_id: $route.query.id }"  title="点击上传Excel"><el-button slot="trigger" size="small" type="primary">选取Excel</el-button></el-upload><el-button:loading="uploadLoading"@click="handleSuccess"style="margin-top: 1rem"type="primary">确定</el-button><el-button @click="handleClose">取消</el-button>

     handleExceed() {this.$message.error("单次限一个Excel,更改请删除");},//如果是上传二进制文件则可不应此步骤 ，选择文件后直接this.$refs.upload.clearFiles()handlePreview(file) {//文件信息  console.log(file);// FileReader : 读取文件内容,只上传文件以下可省略const reader = new FileReader();reader.readAsBinaryString(file.raw);console.log("97", reader);reader.onload=ev=>{try{const f=ev.target.result;const workbook=XLSX.read(f,{type:"binary"});//工作表名const wsname=workbook.SheetNames[0];console.log(wsname);//转成json,最后ws的格式为 [[],[],[]] 第一个数组为表头， 空数据以#显示const ws=XLSX.utils.sheet_to_json(workbook.Sheets[wsname],{header:1,defval:'#'});this.excelData=ws;console.log(this.excelData);}catch(e){console.log(e);return false;}};},//上传结果handleUpload(response, file, fileList) {console.log(response);if (response.code === 1) {this.$nextTick(() => {this.uploadLoading = false;this.uploaded = true;});this.$message({ type: "success", message: "文件上传成功" });this.$emit("update:dialogVisible", false);this.$emit("success", false);this.$refs.upload.clearFiles()} else {this.$message({type: "warning",message: response.message,});this.$nextTick(() => {this.uploadLoading = false;})}},handleSuccess() {//上传this.$refs.upload.clearFiles()this.$message({ type: "success", message: "文件上传成功" });},

Vue导入上传Excel相关推荐

vue上传excel并展示_（一）vue导入上传excel功能
1.excel上传功能 ref="upload" :show-upload-list="false" :default-file-list="defa ...
vue之上传 excel文件
目录 vue之上传 excel文件父组件 UploadExcel.vue 效果 vue之上传 excel文件父组件 <upload-excel-component :on-success ...
ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）
<a-uploadname="file" //发到后台的文件参数名:multiple="false" //禁用多选:file-list="fil ...
Vue - 本地上传 Excel 文件页面表格预览（配合 ElementUI / 带分页）
文章底部,获取示例源代码,克隆仓库运行起来. 代码干净整洁,无任何冗余代码, 根据自己的需求,进行改造即可. 效果图
php上传查询excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例
PHP上传Excel文件导入数据到MySQL数据库示例2020-06-20 00:34:11 最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里 ...
php 上传excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例
最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开 ...
使用ocupload和POI一键上传Excel并解析导入数据库
使用的工具如下: JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...
laravel-admin / Dcat admin 上传Excel并导入数据到数据库
准备工作安装maatwebsite/excel composer require maatwebsite/excel laravel-admin 效果图创建按钮 $grid->tools(f ...
python flask上传Excel并把Excel的数据导入数据库
前端上传Excel <form action="/toexcel/" method="post" enctype="multipart/form ...

Vue导入上传Excel

Vue导入上传Excel相关推荐

最新文章

热门文章