大文件分割切片上传

1,获取到file文件

async uploadPptFile(file){
	// 放入文件列表
    this.preprocess(file)
},

2,进行文件切割

切割标准以3-10M为基准单位,获取可以切割的个数进行遍历,使用formData包装好切割的参数去请求数据;

preprocess(File){
            this.message = this.$message({
                message: "正在上传中",
                type: "info",
                duration: 0,
            });
            const initUploadParams = {
                "resource_size":File.size, //文件大小
                "resource_hash": '', //文件的md5
                "resource_name": File.name, //文件名
                "locale": 'zh',
                "group":'file'
            }
            const fileSize = File.size;
            // 调用后端检查文件上传情况接口
           this.$http.post(this.$util.upLoadPPt.url,{
            ...initUploadParams
           }).then( async (res)=>{
                if(res.data.error*1 === 0){
                    if(res.data.savedPath.length === 0){
                        let chunkSize = 10000000;   //每一个切片大小
                        let chunkCount = Math.ceil(fileSize / chunkSize);    //计算当前选择文件需要的分片数量,需要切片的数量
                        for(var i = 0 ; i< chunkCount ; i++){
                            if(this.isUploadPpt){
                                let start = i*chunkSize,
                                end = Math.min(fileSize, start + chunkSize)
                                this.percentage = parseInt((i+1) / chunkCount * 100)
                                var form = new FormData();
                                form.append('resource_chunk', File.raw.slice(start, end));
                                form.append('resource_name' , File.name);
                                form.append('resource_ext', res.data.resourceExt);
                                form.append('chunk_total', chunkCount);
                                form.append('chunk_index', i+1);
                                form.append('resource_temp_basename', res.data.resourceTempBaseName);
                                form.append('group', 'file');
                                form.append('group_subdir', res.data.groupSubDir);
                                form.append('locale', 'zh');
                                form.append('resource_hash', '');
                                await this.getMethods(form , File)
                            }else{
                                break
                            }
                        }
                    }
                }
            })
        },

3,遍历请求分割的接口上传

每次将分割好的文件给到接口,后端会将其整合起来 最终返回回来;


        getMethods(formdata , File) {
            if(!this.loadingPptFile || this.isStop){
                this.message.close();
                return
            }
            return new Promise((resolve , reject) => {
                uploadingPptFile(formdata).then(res=>{
                    if(res.error === 0 && res.savedPath !== ''){
                        if(!this.loadingPptFile){
                            this.message.close();
                            return
                        }
                        this.loadingPptFile = false;
                        this.pptFileLists = [{
                            url: res.savedPath,
                            name: File.name
                        }];
                        this.message.close();
                        this.$message.success('上传成功!')
                        this.isLoading = false
                        this.ruleForm.file_name = this.pptFileLists[0].name
                    }
                    resolve();
                })
            })
        },```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值