使用vue不走数据库实现导入excel

使用vue不走数据库实现导入excel

首先需要引入依赖xlsx

npm install xlsx

具体实现方法

/** 前端excel上传 */
    handleChange(file, fileList) {
    
    
      // 只能上传一个Excel，重复上传会覆盖之前的
      this.fileList = [fileList[fileList.length - 1]];
      this.file = file.raw;
      let reader = new FileReader();
      reader.readAsArrayBuffer(this.file);
      new Promise((resolve, reject) => {
    
    
        reader.onload = function () {
    
    
          let buffer = reader.result;
          let bytes = new Uint8Array(buffer);
          let length = bytes.byteLength;
          let binary = "";
          for (let i = 0; i < length; i++) {
    
    
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require("xlsx");
          let wb = XLSX.read(binary, {
    
    
            type: "binary",
          });
          let results = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // console.log("从当前excel文件中读出的内容是", results);
          if (results instanceof Array) {
    
    
            this.directionList = [];
            results.forEach((i) => {
    
    
              let obj = {
    
    
                projectName: i.名称,
                technicalField: i.手机号.toString(),
                content: i.内容,
              };
              this.directionList.push(obj);
            });
            // console.log("转换后是", this.directionList);
          }
          resolve(reader.directionList);
        };
      }).then((res) => {
    
    
        this.$nextTick(() => {
    
    
          res.forEach(item=>{
    
    
            this.directionDelDtoList = [...this.directionDelDtoList,item]
          })
        });
      });
    },