Vue.Js和Java实现文件分片上传的方法-创新互联

这篇文章将为大家详细讲解有关Vue.Js和Java实现文件分片上传的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

代码从项目中剥离修改，未经测试，仅提供思路。

前端

upload(file) {
 //从后台获取已经上传的文件分片数
 getIdx(md5)
  .then(function(res) {
   let retry = 3;
   uploadPart(retry, file, res.data);
  })
  .catch(); 
}

uploadPart(retry, file, idx) {
 //设置分片大小（单位Byte）
 let bufferLength = 1024 * 1024 * 5;
 //计算开始的切割点,idx是上传成功的分片数，未上传过文件则开始点为0
 let start = idx * bufferLength;
 //全部上传完毕或重试次数用完则退出
 if(start>=file.size || retry<=0) return;
 //计算分割的位置
 let end = start + bufferLength;
 //如果分割点超出文件大小，回退分割点
 if (end > file.size) {end = fileSize;}
 //切割文件
 var chunk = file.slice(start, end);
 //创建 formData 对象并添加数据
 let formData = new FormData();
 formData.set("file", chunk);
 //如果是第一次上传，连同文件块数量也上传
 if (start == 0) { 
  //计算文件切片总数,向上取整
  let chunkNum = Math.ceil(file.size / bufferLength);
  formData.set("total", chunkNum);
 }
 //上传文件的api，此处使用axios发送请求
 doUpload(formData)
  //发送成功，则上传下一片，递归调用方法
  .then(function() {
   retry = xx;//刷新重试次数
   uploadPart(retry, file, ++idx);
  })
  //发送失败
  .catch(function() {
   retry--;//重试次数减一
   //重试上传这一片
   uploadPart(retry, file, idx);
  });
},

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。