vue实现大文件上传

代码还有可以优化的地方，欢迎大家指出，共同成长

<el-upload class="upload-demo" 
            ref="uploadPlan" 
            action="" 
            :accept="accept" 
            :on-preview="handlePreviewPlan" 
            :on-remove="handleRemovePlan"
            :before-upload="beforeUploadPlanBigSize" 
            :on-exceed="exceed"
            :http-request="isSizeShow<20 ? beforeUploadFilePlanBig :beforeUploadFilePlan"
            :file-list="newfileList" 
            :auto-upload="true" 
            :multiple="true"  
            :limit="5">
       <el-button size="mini" :disabled="isProgress && progressPercent!=100">选择文件</el-button>
       <el-progress :percentage="progressPercent" v-if="isProgress"></el-progress>
</el-upload>
<script>
    export default {
        name:'upload'
        data() {
            return {
                uploadloading:false,
                uploadId:'',
                fileName:'',
                accept:'.jpg,.jpeg,.png,.bmp,.gif,.xls,.xlsx,.pdf,.doc,.docx
,.txt,.zip,.rar',
num:0,
                partNum:0,
                progressPercent:0,
                isSizeShow:0,
                isProgress:false,
                newfileList:[],
            }
        },
        methods:{
            // 删除
            handleRemovePlan(file){
                this.newfileList.forEach((item,index,arr) => {
                    if(item.uid === file.uid){
                        this.newfileList.splice(index,1);
                    }
                }); 
            },
            // 下载
            handlePreviewPlan(file) {
                 window.open(file.url,"_blank");
            },
            // 上传之前的限制
            beforeUploadPlanBigSize(file){
                return new Promise((resolve, reject) => {
                    this.progressPercent=0
                    this.isSizeShow = file.size / 1024 / 1024
                    const isLt5M = file.size / 1024 / 1024 < 300;
                    if (!isLt5M) {
                        this.$message.error("请上传大小不超过300M的文件");
                        return reject(false);
                    }
                    const filename = file.name
                    const postfix= filename.substring(filename.lastIndexOf('.'))
                    if(!this.accept.includes(postfix)) {
                        this.$message.error('文件类型仅支持.jpg,.jpeg,.png,.bmp,.gif,.xls,.xlsx,.pdf,.doc,.docx,.txt,.zip,.rar')
                        return reject(false);
                    }
                   return resolve(true);
                });
            },
            exceed(files, fileList){
                this.$message.warning('附件最多上传5个')
            },
            beforeUploadFilePlanBig(file) {
                this.mode = file.file;
                const fileadfs = new FormData();
                fileadfs.append("file", file.file);
                fileadfs.append("platformId", 20);
                this.isProgress = true;
                this.interval = setInterval(() => {
                    if (this.progressPercent >= 99) {
                        clearInterval(this.interval);
                        return;
                    }
                    this.progressPercent += 1;
                }, 300);
                // 上传地址
                let uploadBaseUrl = `platform/base/big/upload/bjfpFieUpload`;
                this.$axios.post(uploadBaseUrl, fileadfs ).then((params) => {
                    if (params.code == "0") {
                        this.progressPercent = 100;
                        this.uploadFileDataPlan = params.data;
                        this.fileListPlan = [
                            {
                            url: this.uploadFileDataPlan.internet,
                            name: this.uploadFileDataPlan.uploadFileName,
                            },
                        ];
                        this.newfileList.push(this.fileListPlan[0])
                        this.$message.success("上传成功");
                    }else {
                        this.$message.error(params.msg);
                        let uid = file.uid
                        let idx = this.$refs.uploadPlan.uploadFiles.findIndex(item => item.uid === uid)
                        this.$refs.uploadPlan.uploadFiles.splice(idx, 1)
                    }
                });
            },
            beforeUploadFilePlan(file) {
            this.handleUpload(file)
        },
        // 大文件分片上传
        handleUpload(param) {
            this.uploadId=''
            this.fileName=''
            this.num=0
            this.partNum=0
            this.progressPercent=0
            let uploadBaseUrl = `/platform/base/big/upload/getUploadId`;
            this.checkedshow = true;
            this.$axios.get(uploadBaseUrl,{objectName:param.file.name}).then((res) => {
                if(res.code == 0){
                    this.uploadId = res.data.uploadId;
                    this.fileName = res.data.fileName;
                    const chunkSize = 1024 * 1024 * 5; // 每个分片的大小，5MB
                    let partNumber = Math.ceil(param.file.size / chunkSize); // 一共分多少个
                    this.partNum = partNumber;
                    this.uploadMethods(param,partNumber,chunkSize)
                }
            });
        },
        async uploadMethods(param,partNumber,chunkSize){
            for(let i=0;i<partNumber;i++){
                this.isProgress = true
                const chunk = param.file.slice(chunkSize * i, i === partNumber - 1 ? param.file.size : chunkSize * (i + 1))
                const formData = new FormData();
                formData.append('uploadId', this.uploadId);
                formData.append('partNumber', i+1);
                formData.append('partFile', chunk);
                formData.append('fileSize', chunk.size);
                formData.append('fileName', this.fileName);
                await this.uploadApi(formData,param,chunk.size) 
            }
        },
        async uploadApi(formData,param,size){
            await this.$axios.post('/platform/base/big/upload/chunkUpload', formData).then((params) => {
                if (params.code == "0"){ 
                    this.num++
                    if(this.num < this.partNum){
                        this.progressPercent = Math.round(((this.num*size)/param.file.size)*100)
                      }else {
                          this.progressPercent = 100
                      }
                      if(this.num == this.partNum){this.$axios.get('/platform/base/big/upload/completeUpload',{objectName:this.fileName,fileName:this.fileName,uploadId:this.uploadId}).then((res) => {
                          this.checkedshow = false;
                          if(res.code == 0){
                              this.num=0
                              this.progressPercent = 100;
                              this.fileListPlan = [{
                                  url: res.data.url,
                                  name: param.file.name,
                              }];
                              this.newfileList.push(this.fileListPlan[0])
                           }
                        })
                      }
                    }
                })
            },
        },
    
    }
</script>