最近在做视频上传展示的相关业务!但是因为最开始使用的是单文件上传所以一旦遇到大文件上传的速度就非常慢!为此在网上一直找寻分片的方法!得到了思路!
直接讲一下我这边看了那么多文档加上自己理解写的demo(虽然前端大部分代码是网上的)!
在看demo之前需要理解这个分片的思路。
1、假设现在有一个很大的石头搬到某个地方你直接搬的话那么就是走的非常慢还有可能因为外部因素搬到一般摔了那就做了无用功了。
那么现在把石头切割成多个小块你搬小部分石头是不是就很快,然后当全部小石头搬完后在目的地把这些小石头拼接起来是不是还是原来的样
子(别抬杠)。
2、那么分片的原理就是这样文件太大切割成多个小文件在后台接收这些分片然后创建临时文件。在所有分片传完之后调用后台合并接口,将
刚才的分片合并成完整的文件。
直接上前端代码:
JS分片上传-极速上传$("#slice").change(function(event) {
var file = $("#slice")[0].files[0];
PostFile(file,0);
});
//执行分片上传
function PostFile(file,i, uuid){
var name = file.name, //文件名
size = file.size, //总大小shardSize = 2 * 1024 * 1024,
shardSize = 10 * 1024 * 1024, //以2MB为一个分片,每个分片的大小
shardCount = Math.ceil(size / shardSize); //总片数
if(i >= shardCount){
return;
}
//判断uuid是否存在
if (uuid == undefined || uuid == null) {
uuid = guid();
}
//console.log(size,i+1,shardSize); //文件总大小,第一次,分片大小//
var start = i * shardSize;
var end = start + shardSize;
var packet = file.slice(start, end); //将文件进行切片
/* 构建form表单进行提交 */
var form = new FormData();
form.append("uuid", uuid);// 前端生成uuid作为标识符传个后台每个文件都是一个uuid防止文件串了
form.appe