Vue导入上传Excel
对Excel的数据进行上传首先需要使用xlsx此文章的上传方式为手动上传(数据解析可在前端进行,也可交由后端处理)安装插件npm install xlsx引入import XLSX from ‘xlsx’使用el-upload进行上传 (el-upload在这不再做介绍)<el-upload:show-file-list="true":headers="{ Authorization: to
·
对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: "文件上传成功" });
},
更多推荐
已为社区贡献6条内容
所有评论(0)