Vue input上传excel文件

<input type="file" ref="upload" accept=".xls, .xlsx" class="outputlist_upload file">

 

import XLSX from 'xlsx';

 

data() {

    return {

        outputs: [],

    };

},

mounted() {

      this.$refs.upload.addEventListener('change', (e) => {

           // 绑定监听表格导入事件

           this.readExcel(e);

       });

},

methods: {

     readExcel(e) {

         // 表格导入

         const that = this;

         const { files } = e.target;

         console.log(files);

         if (files.length <= 0) {

             // 如果没有文件名

             return false;

         }

        if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');

            return false;

        }

 

       const fileReader = new FileReader();

       fileReader.onload = (ev) => {

          try {

             const data = ev.target.result;

             const workbook = XLSX.read(data, {

                  type: 'binary',

              });

             const wsname = workbook.SheetNames[0]; // 取第一张表

             const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json                 表格内容

             console.log(ws);

             that.outputs = []; // 清空接收数据

             // 编辑数据

            ws.map((i) => {

                 const sheetData = {

                      address: ws[i].addr,

                      value: ws[i].value,

                 };

               that.outputs.push(sheetData);

               return '';

           });

           this.$refs.upload.value = '';

       } catch (e) {

           return false;

       }

   };

   fileReader.readAsBinaryString(files[0]);

},

},