工具：vue2.0+element-ui+vscode
连接后端的动态导入
①首先在结构层里进行布局，
创建一个点击事件@click="xxx"
<form enctype="multipart/form-data" id="daoru">
<input
type="file"
name="fileup"
id="uploadEventFile"
@change="fileChange"
style="display: none"
/>
</form>
<li @click="labelExcelImport">
<i class="el-icon-download"></i>导入
</li>②其次在行为层里利用axios进行后端数据交互
//导入
labelExcelImport() {
event.preventDefault();
document.getElementById("uploadEventFile").click();
},
fileChange(el) {
// el.preventDefault(); //取消默认行为
let uploadEventFile = document.getElementById("uploadEventFile").files;
this.file = el.target.files[0];
if (uploadEventFile == "") {
this.$message({
type: "warning",
message: "请选择文件",
});
}
let formData = new FormData(document.getElementById("daoru"));
// 向 formData 对象中添加文件
formData.append("file", this.file);
const rLoading = this.openLoading();
this.$axios({
method: "post",
url:
window.serverAPI.url +
"", //请求接口
//请求接口的参数
data: formData,
// responseType: "blob",
headers: {
"Content-Type": "multipart/form-data", //设置请求头请求格式为JSON
Authorization: window.sessionStorage.getItem("token"),
},
}).then((data) => {
// console.log(data);
if (data.data.code == 200) {
Loading.close();
this.$notify({
type: "error",
dangerouslyUseHTMLString: true,
message: data.data.data,
position:"top-left",
duration:4000
});
} else {
alert(
"未上传指定文件，将跳转到入网页面",
this.$router.push("/xxx/xxx")
);
}
// location.href="http://www.baidu.com"
this.xxx();//表格接口
document.getElementById("uploadEventFile").value = "";
});
},纯前端的静态导入
①创建一个js文件
export let networkPro = { //函数名称
xxx1: {
text: "xxx1",
type: "string"
},
xxx2: {
text: "xxx2",
type: "string"
},
xxx3: {
text: "xxx3",
type: "string"
},
}
export function readFile(file) { //函数名称
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file)
reader.onload = ev => {
resolve(ev.target.result);
}
})
}②下载xlsx插件，然后在mainjs文件里导入
npm install --save xlsx
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX③在vue页面里进行调用和封装
//结构层
<el-upload
:on-success="handleSuccess"
:before-upload="beforeUpload"
action
:on-change="uploadExcel"
:show-file-list="false"
:file-list="fileList"
accept=".xlsx,.xls"
:auto-upload="false">导入</el-upload>
//引入
import XLSX from "xlxs";
import { networkPro, fileReader } from "../../excel.js";
//导入
async uploadExcel(ev){
let file = ev.raw
// console.log(file);
if(!file) return ;
this.show = false;
//读取file数据（变为json格式）
let data = await readFile(file)
// console.log(data);
let workbook = XLSX.read(data, {type:"binary"}),
worksheet = workbook.Sheets[workbook.SheetNames[0]];
data = XLSX.utils.sheet_to_json(worksheet);
// console.log(workbook);
// console.log(worksheet);
console.log(data);
//把读取出来的数据变为最后传递给服务器的数据
let arr = [];
data.forEach(item =>{
let obj = {};
for(let key in networkPro){
if (!Object.hasOwnProperty.call(networkPro,"key")) break;
let v =networkPro[key],
text = v.text,
type = v.type;
v= item[text] || "";
type === "string" ?(v= String(v)):null
type === "number" ?(v= Number(v)):null
obj[key] =v
}
arr.push(obj);
})
//展示到页面
this.show = true;
this.tableData = arr;
console.log(this.tableData);
},作者上一篇文章，