elementUI+Vue 上传csv文件

1. vue项目+elementUI下载（自行解决，也可以查看我之前的博客）

2. 代码

HTML

  <el-upload
    class="upload-demo"
    ref="upload"
    drag
    accept=".csv"
    action
    :multiple="false"
    :limit="1"
    :auto-upload="false"
    :on-change="handleChange"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>

JS

  handleChange(file, fileList) {
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          console.log("未处理的原始数据如下：");
          console.log(outdata); //此处可对数据进行处理
          let arr = [];
          outdata.map((v) => {
            let obj = {};
            obj.code = v["Code"];
            obj.name = v["Name"];
            obj.pro = v["province"];
            obj.cit = v["city"];
            obj.dis = v["district"];
            arr.push(obj);
          });
          _this.da = arr;
          _this.dalen = arr.length;
          return arr;
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },

CSS

.el-upload-dragger{
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: none;
}
.upload-demo {
  height: 30px;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex-direction: row-reverse;
}
.el-upload {
  border: none;
  background-color: transparent;
  height: 30px;
  width: 10%;
}
.el-upload-list {
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: center;
}
.el-upload-list__item {
  margin-top: 0;
}
.el-upload-list__item:first-child {
  margin-top: 0;
}

个人不确定是否侵权，因为写这个找了蛮多东西的，侵权必删