这里我们涉及到了一种算法——分支算法

最近着手的广告平台项目中，因为需要客户提供自证视频，证明是本人公司的真实性。

现如今，视频的分辨率越发的高，往往就伴随着视频内存的巨大，一个几分钟的视频需要几个g的内存，用普通的上传方法肯定不行，文件大速度慢，影响客户的使用体验，为了解决这个问题，我采用了分片上传的方法，将一个大文件，分成n个小文件进行上传，加快传输效率！

这里我们涉及到了一种算法——分支算法

分片上传的概念就是分治算法，分而治之，将一个大问题，转变为多个小问题，进行解决！！

前端分片

首先分片我们是在前端做的，分片传输给后端，这里我用的是vue3，ui框架为ant-desgin,用到的控件为a-upload,用户点击上传选择要上传的文件。

这时我们可以得到文件的名字，以及大小，然后定义你要分片的大小，这里可以写一个判断，跟你你要上传文件的大小，定义你分片的大小，如果文件太小的话，就没有必要进行分片，占用资源。这时候我们就可以拿到总片数，因为会有余数，所以我使用的是Math.ceil向上取整的方法，拿到总片数。这时候我们就可以拿到每次切片的起始位置和结束位置了，然后通过slice对文件进行切片，发给后端进行处理！

//上传方法handleChange:function(file){//获取文件大小    1024字节   1kbconsole.log(file.file)var size = file.file.sizethis.size = size// this.filename = file.file.name//定义分片大小var shardSize = 1024 * 100//总片数//向上取整this.shardCount = Math.ceil(size / shardSize)//切片操作for (var i=0;i<this.shardCount; ++i){//开始位置var start = i * shardSize//结束位置var end = Math.min(size,start+shardSize)//切片var shardfile = file.file.slice(start,end)this.pushshard(shardfile,file.file.name,i)}},

至此前端分片逻辑就完成了！

后端异步写入

后端我使用的是python中的tronado框架异步写入，为了避免同步写入引起阻塞，安装aiofiles库配合着tornado的异步机制，可以提高写入的效率

这里后端获取到文件实体，文件名，标志位，先将文件实体异步写入指定路径中，然后进行读取，按顺序合并，文件操作我就不做过多的讲述了，都是一些固定语法，也没什么逻辑，下面代码展示，请自行观看

# 分片上传
class SliceUploadHandler(BaseHandler):#合并分片async def put(self):filename = self.get_argument("filename",None)count = 0size = self.get_argument("size",None)try:filesize = os.path.getsize("./static/upload/{}".format(filename))except Exception as e:print(str(e))filesize = 0if int(size) != filesize:#异步打开文件句柄async with aiofiles.open("./static/upload/{}".format(filename),"ab") as file:while True:try:#读取分片shard_file = open("./static/upload/{}_{}".format(filename,count),"rb")#异步写入await file.write(shard_file.read())#手动关闭句柄shard_file.close()except Exception as e:print(str(e))breakcount = count + 1self.finish({"errcode":0,"msg":"合并完毕"})# 分片文件接收async def post(self):#接收分片实体file = self.request.files["file"][0]#获取下标count = self.get_argument("count",None)#获取文件名filename = self.get_argument("filename",None)#获取文件内容content = file["body"]#异步写入async with aiofiles.open("./static/upload/{}_{}".format(filename,count),"wb") as file:#异步await file.write(content)self.finish({"errcode":0,"msg":"分片上传成功"})

至此前后端就调试完成了，除此之外，在真实的超大文件传输场景中，由于网络或者其他因素，很可能导致分片任务中断，此时就需要通过降级快速响应，返回托底数据，避免用户的长时间等待，这里我们使用基于Tornado的Apscheduler库来调度分片任务。

分而治之，大型文件分片上传相关推荐

java多线程上传文件_Java大文件分片上传/多线程上传
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
文件分片上传【前端】
·····················断更有点久了,工作太忙,个人太散漫了.还是要学会坚持写博客,毕竟也是自己学习进步的体现.闲话少说,直接进入今天的正题,文件的分片上传. 先介绍一下文件的分片上 ...
大文件分片上传，断点续传，秒传实现
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
jquery 分片上传php,php 大文件分片上传
前端部分上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...
大文件分片上传前端框架_基于Node.js的大文件分片上传
基于Node.js的大文件分片上传我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳 ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
大文件分片上传前端框架_无插件实现大文件分片上传，断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求在一个音视频的添加中,既要有音视频 ...
无插件实现大文件分片上传，断点续传
代码地址如下: http://www.demodashi.com/demo/11888.html 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试 ...
java加vue实例_Vue.Js及Java实现文件分片上传代码实例
upload(file) { //从后台获取已经上传的文件分片数 getIdx(md5) .then(function(res) { let retry = 3; uploadPart(retry, ...
使用webuploader组件实现大文件分片上传，断点续传
无组件断点续传.gif 1. 组件简介 webuploader:是一个以HTML5为主, Flash为辅的文件上传组件,采用大文件分片/并发上传的方式,极大地提高了文件上传的效率,同时兼容多种浏览器版 ...

分而治之，大型文件分片上传

前端分片

后端异步写入

分而治之，大型文件分片上传相关推荐

最新文章

热门文章