记录vue上传excel文件，并获取里面的值，生成数组对象

1.首先导入

npm install --save xlsx@0.17.0
npm install --save file-saver@2.0.5
npm install -D script-loader

2. 引用

import *as XLSX from "xlsx";
import FileSaver from "file-saver";

3.前端代码

<el-card class="box-card" shadow="always">
      <el-divider content-position="left">
        <el-button type="text" @click="show = true">点击上传</el-button>
      </el-divider>
      <el-dialog title="excel导入" :visible.sync="show" width="25%" :before-close="handleClose">
        <el-upload class="upload-demo" :on-remove="handleRemove" :on-change="onChange" :file-list="fileList" :limit="1"
          :auto-upload="false" accept=".xlsx,.doc" drag action="https://jsonplaceholder.typicode.com/posts/">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传1个文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="upload">确 定</el-button>
        </span>
      </el-dialog>
</el-card>

 4.处理对话框和数据

handleClose(done) {//点击蒙版和对话框上的x关闭触发
    this.$confirm('确认关闭？')
        .then(_ => {
           done();
        }).catch(_ => { });
}

上传文件fileList保存上传的文件,onChange（file，fileList）：上传时触发，handleRemove（file，fileList）：移除文件时触发。upload：点击对话框的确定触发

//存储上传的文件列表
onChange(file, fileList) {
    this.fileList = fileList
},
//存储移除后的文件列表
handleRemove(file, fileList) {
     this.fileList = fileList
},
//确认上传
upload() {
     if (this.fileList[0].raw) {//如果存在文件则设置文件类型
          if ((this.fileList[0].raw.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
          || (this.fileList[0].raw.type == 'application/vnd.ms-excel')) {
                    this.importfxx(this.fileList[0].raw)//importfxx()为获取并处理文件数据函数
                } else {
                    this.$message({
                        type: 'warning',
                        message: '附件格式错误，请删除后重新上传！'
                    })
                }

            }
        },

5.处理excel文件数据

importfxx(obj) {
            console.log(obj);
            let _this = this;

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

            var reader = new FileReader();
            //if (!FileReader.prototype.readAsBinaryString) {
            FileReader.prototype.readAsBinaryString = function (f) {
                var binary = "";
                var rABS = false; //是否将文件读取为二进制字符串
                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('上传的数据:',outdata);
                    //此处可对数据进行处理
                    let arr = [];
                    outdata.map(v => {
                        let obj = {}
                        // obj.id = v['序号']
                        obj.title = v['标题']
                        obj.author = v['作者']
                        obj.pageviews = v['浏览量']
                        obj.status = v['状态']
                        obj.display_time = v['时间']
                        arr.push(obj)
                    });
                    
                    if(arr.length>0){
                        _this.$message({
                            type:"success",
                            message:"上传成功"
                        })
                    }
                    this.show=false
                     _this.list=_this.list.concat(arr)//合并原有数组                   
                    return arr;
                };
                reader.readAsArrayBuffer(f);
            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
        }