Vue.Js和Java实现文件分片上传的方法-创新互联
这篇文章将为大家详细讲解有关Vue.Js和Java实现文件分片上传的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联主要从事成都网站设计、成都网站建设、外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务相山,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792代码从项目中剥离修改,未经测试,仅提供思路。
前端
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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:Vue.Js和Java实现文件分片上传的方法-创新互联
文章源于:http://scyanting.com/article/coopgi.html