大文件分割切片上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了大文件分割切片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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，遍历请求分割的接口上传

每次将分割好的文件给到接口，后端会将其整合起来最终返回回来；文章来源地址https://www.toymoban.com/news/detail-551771.html


        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();
                })
            })
        },```