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