Vue中文件切片上传的实现及file对象的slice方法使用
Vue文件切片上传，file对象的slice方法是将大文件分割成多个小文件进行上传。首先，需要获取文件的原始大小和分片大小，然后根据分片大小计算出需要分成多少个片段。接着，使用for循环遍历每个片段，从文件的当前位置开始读取指定大小的数据，并将其存储在一个新的File对象中。最后，将这些新的File对象添加到一个数组中，用于后续的文件上传操作。这样可以实现大文件的分片上传，提高上传效率。
1. file对象介绍
size 表示二进制对象的大小
type 表示二进制对象的类型
slice 方法 分割文件
2. file.slice介绍
第一个参数startByte表示文件起始读取Byte字节
第二个参数则是结束读取字节
文件切片上传
// 文件切片大小定为1MB
letidx=1;constbytesPerPiece=1*1024*1024;letstartBytes=idx*bytesPerPiece;letendBytes=startBytes+bytesPerPiece;if(endBytes>file.size){endBytes=file.size;}2.切割文件
// 切割文件，file对象的slice方法，文件分片的核心方法
constchunk=file.slice(startBytes,endBytes);
3.定义form对象
letparams=newFormData();params.set("chunk",idx);params.set("chunks",totalPieces);params.set("size",file.size);params.set("name",file.name);params.set("plupload",chunk);4.请求后台
// post请求 postForm 为自定义的form表单请求方法
postForm('url',params).then((res)=>{// 根据后端返回是否完成
if(true){returnres;}//递归上传this._uploadBig(file,++idx);})5.全部代码
/***@param{Object}file文件*@param{Number}idx当前分片*@return{Object}*/uploadBig(file,idx){//文件切片大小定为1MBconstbytesPerPiece=1*1024*1024;letstartBytes=idx*bytesPerPiece;letendBytes=startBytes+bytesPerPiece;if(endBytes>file.size){endBytes=file.size;}consttotalPieces=Math.ceil(file.size/bytesPerPiece)//全部上传完毕后退出if(startBytes>=file.size){returnfalse;}//切割文件，file对象的slice方法，文件分片的核心方法constchunk=file.slice(startBytes,endBytes);//定义form对象letparams=newFormData();params.set("chunk",idx);params.set("chunks",totalPieces);params.set("size",file.size);params.set("name",file.name);params.set("plupload",chunk);//post请求postForm为自定义的form表单请求方法postForm('url',params).then((res)=>{//根据后端返回是否完成if(true){returnres;}//递归上传this._uploadBig(file,++idx);})}
