赞
踩
①首先在结构层里进行布局,
创建一个点击事件@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);
- },
作者上一篇文章,
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。