element-ui upload 上傳excel 用xlsx讀取文件行數

1.html

<!--                    上傳：限制excel-->
                    <el-upload
                            class="btn-upload"
                            :action="''"
                            :http-request="uploadBtn"
                            :on-error="uploadError"
                            :show-file-list="false"
                            accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    >
                        <el-button
                                type="primary"
                                size="small"
                                round
                                icon="el-icon-upload2">
                            上傳</el-button>
                    </el-upload>

2.js

import XLSX from 'xlsx';

        // 按鈕-上傳
        uploadBtn(uploadData: any) {
            const rABS = true;
            const f = uploadData.file;
            const reader = new FileReader();
            let jsonArr = [];
            reader.onload = (e: any) => {
                let data: any = e.target.result;
                if (!rABS) data = new Uint8Array(data);
                const workbook = XLSX.read(data, {
                    type: rABS ? 'binary' : 'array'
                });
                const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 拿第一個sheet的內容
                jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header:1}); // 轉成array
                const uploadFileContentList = jsonArr.filter((item: any) => {
                    if (item.length > 0) {
                        return item;
                    }
                })
                // 讀取到文件名稱、內容行數，提示用戶
                this.$confirm(`將上傳【${uploadData.file.name}】,共${uploadFileContentList.length}行, 是否繼續?`, '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.uploadRequest(uploadData); // 調接口
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            };
            if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
        }

        // 接口：上傳
        async uploadRequest(data: any) {
            this.uploadAssignLoading = Loading.service({
                fullscreen: true,
                text: '上傳中，請耐心等待...'
            });
            let params = new FormData();
            params.append('file', data.file); // 添加參數

            await network.xxxApi.upload(params).catch(() => {
                this.$nextTick(() => {
                    this.uploadAssignLoading.close();
                });
                this.$message({
                    type: 'info',
                    message: '網絡異常，請重試',
                });
            });
            this.uploadAssignLoading.close(); // 關loading
            this.$message({
                type: 'success',
                message: '上傳成功'
            });
        }

        // 上傳分配: 失敗
        uploadAssignError(data: any) {
            this.uploadAssignLoading.close();
            this.$message({
                type: 'info',
                message: '異常，請重試',
            });
        }