vue分片上传大量表格数据

<template>
    <div>
        <el-upload class="upload-demo" :limit="1" accept=".xls,.xlsx" drag :auto-upload="false" :on-change="changeFile"
            :file-list="fileList" :on-remove="handleRemove" action="">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">请上传符合要求的表格文件,最多上传一个文件。
            </div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
            <el-progress :percentage="uploadProgress.progress" v-if="uploadProgress.isShow">
            </el-progress>
            <el-button size="small" type="success" @click="updateGood" :loading="updataBtnLoading">{{
                !updataBtnLoading ? '立即更新' : '正在更新中' }}</el-button>
            <el-button @click="closeDialog">关闭</el-button>
        </span>
    </div>
</template>
<script>
import XLSX from "xlsx";
export default {
    data() {
        return {
            updataBtnLoading: false,
            fileList: [],
            uploadProgress: {
                isShow: false,
                progress: 0
            }
        }
    },
    methods: {
        changeFile(file, fileList) {
            this.uploadProgress.isShow = false
            this.uploadProgress.progress = 0
            this.fileList = fileList
        },
        handleRemove(file, fileList) {
            this.fileList = [];
        },
        async uploadChunk(chunk) {
            if (!this.updataBtnLoading) {
                throw new Error('取消上传')
            }
            // 在这里实现你的分片上传逻辑
            let response = await updataXlsGood(chunk)
            if (response.status != 200) {
                this.$message.error('数据错误')
                this.updataBtnLoading = false
                throw new Error('')
            }
        },
        closeDialog() {
            if (this.updataBtnLoading) {
                this.$confirm('正在更新中，确定要关闭吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fileList = []
                    this.uploadProgress.isShow = false
                    this.updataBtnLoading = false
                }).catch(() => {

                });
            } else {
                this.fileList = []
                this.uploadProgress.isShow = false
            }
        },
        async updateGood() {
            try {
                if (this.fileList.length == 0) {
                    this.$message.error('请上传文件')
                    return
                }
                this.updataBtnLoading = true
                let dataBinary = await this.readFile(this.fileList[0].raw);
                let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
                let workSheet = workBook.Sheets[workBook.SheetNames[0]]
                let arr = [];
                const data = XLSX.utils.sheet_to_json(workSheet);
                for (let i = 0; i < data.length; i++) {
                    const el = data[i];
                    let obj = {
                        bar_code: el['商品编码'],
                        product_id: el['ID'],
                        store_name: el['商品名称'],
                        unit_name: el['商品单位'],
                        spec_type: el['规格类型'] == '单规格' ? 0 : 1,
                    }
                    let attrValueItem = {
                        price: el['售价'],
                        cost: el['成本价'],
                        ot_price: el['市场价'],
                        stock: el['库存'],
                        bar_code: el['商品编号/条形码'],
                        weight: el['重量'],
                        volume: el['体积'],
                        sku: el['规格'],
                        value_id: el['规格id']
                    };
                    if (obj.spec_type == 1) {
                        let existingItem = arr.find(item => item.product_id == el['ID']);
                        if (existingItem) {
                            existingItem.attrValue.push(attrValueItem);
                            continue;
                        } else {
                            obj.attrValue = [attrValueItem];
                        }
                    } else {
                        obj.attrValue = [attrValueItem];
                    }
                    arr.push(obj);
                }
                //这个是我自己转成后端需要的数据的格式
                console.log(arr, '转换之后的数据');
                let chunkSize = 5;
                this.uploadProgress.isShow = true
                for (let i = 0; i < arr.length; i += chunkSize) {
                    let chunk = arr.slice(i, i + chunkSize);
                    await this.uploadChunk(chunk);
                    this.uploadProgress.progress = Math.min((i + chunkSize) / arr.length * 100, 100);
                }
                this.updataBtnLoading = false
            } catch (err) {
                this.updataBtnLoading = false
                console.log(err);
            }
        },
    }
}
</script>