一、安装依赖

image.png

1、安装依赖

  1. npm install -S file-saver xlsx
  3. npm install -D script-loader
  4. npm install xlsx

2、在main.js中引入XLSX

  1. import XLSX from 'xlsx'
  2. Vue.use(XLSX)

3.创建Filechang.js文件

  1. /*
  2.  * @description：二进制表格读取
  3.  * @author: 王浩
  4.  * @Date: 2022-05-30 17:36:20
  5.  * @Modified By:
  6.  * @version: 1.0.0
  7.  */
  9. /**
  10.  * 把文件按照二进制进行读取
  11.  * @param {*} file
  12.  * @returns
  13.  */
  14. export function readFile(file) {
  15.   return new Promise((resolve) => {
  16.     let reader = new FileReader();
  17.     reader.readAsBinaryString(file);
  18.     // onload 读取完成后触发
  19.     reader.onload = (ev) => {
  20.       resolve(ev.target.result);
  21.     };
  22.   });
  23. }
  25. // 字段对应表
  26. export let character = {
  27.   monitorObjId: {
  28.     text: "监测对象ID",
  29.     type: String,
  30.   },
  31.   monitorObjName: {
  32.     text: "监测对象名称",
  33.     type: String,
  34.   },
  35.   monitorObjectsId: {
  36.     text: "监测对象详情",
  37.     type: String,
  38.   },
  39. };

4.使用

  1. <!-- 导入文件 -->
  2.           <ami-upload
  3.             action="/ami/ma01-02-068/monitor/importObjs"
  4.             class="upload-demo"
  5.             ref="upload"
  6.             accept=".xls, .xlsx"
  7.             :limit="1"
  8.             auto-upload
  9.             :show-file-list="false"
  10.             :data="{ monitorFieldId }"
  11.             :file-list="fileList"
  12.             :before-upload="beforeUpload"
  13.             :before-remove="beforeRemove"
  14.             :on-exceed="handleExceed"
  15.             :on-change="handleChange" 
  16.             :auto-upload="false"
  17.           >
  18.             <!--   -->
  19.             <ami-button class="import" round> <i class="ami-icons-daoru"></i> 导入</ami-button>
  20.           </ami-upload>
  1. //----------------------------------导入部分----------------------------
  2.  import * as XLSX from "xlsx"; // 引入xlsx
  3.  import { readFile, character } from "@/utils/Filechang"; // 引入文件读取
  1. // 采集excel数据
  2.     async handleChange(ev) {
  3.       // 判断是否为确定文件
  4.       if (ev.name === "测试导入文件.xlsx") {
  5.         const file = ev.raw;
  6.         if (!file) return;
  7.         // 读取excel数据
  8.         let reader = await readFile(file);
  9.         const worker = XLSX.read(reader, { type: "binary" });
  10.         const worsheet = worker.Sheets[worker.SheetNames[0]];
  11.         // 将返回的数据转换为json对象的数据
  12.         reader = XLSX.utils.sheet_to_json(worsheet);
  13.         // 将读取出来的数据转换为可以发送给服务器的数据
  14.         let data = [];
  15.         reader.forEach((item) => {
  16.           let obj = {};
  17.           for (let key in character) {
  18.             // eslint-disable-next-line no-prototype-builtins
  19.             if (!character.hasOwnProperty(key)) break;
  20.             let v = character[key];
  21.             let text = v.text;
  22.             let type = v.type;
  23.             v = item[text] || "";
  24.             type === "string" ? (v = String(v)) : null;
  25.             type === "number" ? (v = Number(v)) : null;
  26.             obj[key] = v;
  27.           }
  28.           data.push(obj);
  29.         });
  30.         if (data.length === 0) {
  31.           this.$message.error("请选择正确的excel文件！");
  32.           return;
  33.         } else {
  34.           // 拼接数据
  35.           this.objsVOS.list.push(...data);
  36.           return this.$message.success("导入成功！");
  37.         }
  38.       } else {
  39.         this.$refs.upload.clearFiles();
  40.         this.$message.error("请选择正确的excel文件！");
  41.       }
  42.     },
  43.     // 限制上传个数
  44.     handleExceed(files) {
  45.       if (files.length >= 1) {
  46.         this.$message.warning("只能上传一个文件");
  47.         this.$refs.upload.clearFiles();
  48.         return false;
  49.       } else if (files.length === 0) {
  50.         this.$message.warning("请选择文件");
  51.       }
  52.     },
  53.     // 文件上传前限制
  54.     beforeUpload(file) {
  55.       console.log(file);
  56.       const testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
  57.       const extension = testmsg === "xls" || "xlsx";
  58.       const isLt2M = file.size / 1024 / 1024 < 10; //这里做文件大小限制
  59.       if (!extension) {
  60.         this.$message.error("文件上传只能是xls、xlsx 格式");
  61.         return false;
  62.       }
  63.       if (!isLt2M) {
  64.         this.$message.error("文件大小不能超过 10MB!");
  65.         return false;
  66.       }
  67.       return extension && isLt2M;
  68.     },
  69.     // 文件移除
  70.     beforeRemove() {
  71.       this.$refs.upload.clearFiles();
  72.     },