验证excel表格数据不超过10000

src/components/wechatmembers/bulkIntegral.vue

@@ -106,10 +106,15 @@
           prop="file"
           required>
           <el-upload
+            v-loading="load"
             class="upload-demo"
             action="https://jsonplaceholder.typicode.com/posts/"
             :file-list="formByImport.fileList"
-            :before-upload="beforeUpload">
+            :before-upload="beforeUpload"
+            :limit="1"
+            :on-error="handleError"
+            :on-exceed="handelExceed"
+            :on-change="handleChange">
             <div slot="trigger">
               <div class="importBox">
                 <i class="iconfont icon-shangchuan"></i>
@@ -135,7 +140,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogImport = false">取 消</el-button>
-        <el-button type="primary" @click="importTable">确 定</el-button>
+        <el-button type="primary" @click="importTable" :disable="load">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -161,12 +166,13 @@ export default {
         fileList: [],
       },
       rules: {
-        importValue: [{required: true, message: 'hello', trigger: 'change'}]
+        importValue: [{required: true, message: '请选择导入类型', trigger: 'change'}]
       },
       // 文件列表
       typeList: ['积分增加', '积分扣除'],
-
-      // test
+      rows: 0, // excel数据数量
+      // 上传验证加载
+      load: false,
     }
   },
   methods: {
@@ -212,24 +218,70 @@ export default {
         this.$message.warning("请上传excel表格");
         return false;
       }
-      var fileReader = new FileReader();
-      var workbook;
-      fileReader.onload = function(ev) {
-        var data = ev.target.result
-        workbook = XLSX.read(data, {  
-            type: 'binary'  
-        }),
-        // 以二进制流方式读取得到整份excel表格对象  
-        persons = []; // 存储获取到的数据
+      // console.log(file)
+      var reader = new FileReader();
+      // console.log(fileReader)
+      var fromTo;
+      FileReader.prototype.readAsBinaryString = (file) => {
+        var binary = "";
+        var wb; //读取完成的数据
+        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]);
+          }
+          wb = XLSX.read(binary, {
+              type: 'binary'
+          });
+          // 遍历每张表读取
+          for (var sheet in wb.Sheets) {
+            if (wb.Sheets.hasOwnProperty(sheet)) {  
+              fromTo = wb.Sheets[sheet]['!ref']; //表有几行数据
+            }
+          }
+          _this.rows = Number(fromTo.replace(/^[A-Z]+1:[A-Z]/, ''));
+          console.log(_this.rows)
+          this.load = false;
+          // 接下来的操作
+          return;
+        }
+        reader.readAsArrayBuffer(file);
       }
-      var fromTo = '';  
-      // 遍历每张表读取  
-      for (var sheet in workbook.Sheets) {  
-        if (workbook.Sheets.hasOwnProperty(sheet)) {  
-          fromTo = workbook.Sheets[sheet]['!ref'];  
-          console.log(fromTo); //表有几行数据
-        }  
+      reader.readAsBinaryString(file);
+      // console.log(rows, fromTo)
+      // var workbook;
+      // fileReader.readAsBinaryString(file)
+      // console.log(fileReader)
+      // fileReader.onload = function(ev) {
+      //   var data = ev.target.result
+      //   workbook = XLSX.read(data, {  
+      //       type: 'binary'  
+      //   })
+      // }
+      // console.log(workbook)
+      // var fromTo = '';
+      // // 遍历每张表读取
+      // for (var sheet in workbook.Sheets) {  
+      //   if (workbook.Sheets.hasOwnProperty(sheet)) {  
+      //     fromTo = workbook.Sheets[sheet]['!ref'];  
+      //     console.log(fromTo); //表有几行数据
+      //   }
+      // }
+    },
+    handleChange(val) {
+      if(this.rows > 10000) {
+        console.log(1)
+        this.$message.warning('数据超过10000，请重新上传');
+        this.formByImport.fileList.pop()
       }
+    },
+    handelExceed() {
+      this.$message.warning('超出最大上传数');
+    },
+    handleError() {
+      this.load = false;
     }
   },
   created() {