断点续传相关知识.md · tangchenc/共享知识库

# 大文件分片上传相关知识

当我们上传文件时一般的做法是就是保持HTTP的持久连接，等待后台接收完毕，返回成功响应代表上传完毕。

但是当我们上传比如视频等很大的文件时，虽然这种普通的方式可以完成传输，但是弊端也很明显，在网络不稳定的情况下，很可能导致链接中断。上传到一半出错重传，我相信这会让很多人感到崩溃

这时文件分片就登场了

## 一、分片上传

原理：前端将拿到的二进制文件分为若干个块，并将每个块按顺序标识一个码，异步上传。

```javascript
//文件切片大小
const BYTES_PER_SLICE = 1024*1024
//已成功上传的数量
let hasSendNum = 0
//总切片数
let totalSlices = 0

function submit(){
    const file = document.getElementById('file').files[0]
    const fileName = file.name
    
    let totalSize = file.size
    
    //当前片数
    let index = 0
    
    let start = 0
    let end = 0
    
    totalSlices = Math.ceil(file.size/BYTES_PER_SLICE)
    
    while(index < totalSlices){
        start = index*BYTES_PER_SLICE
        end = start+BYTES_PER_SLICE
        
        let slice = file.slice(start,end)
        uploadFile(slice,index++,fileName)
    }
}

function uploadFile(slice,index,fileName){
    let retry = 1
    let fromData = new FromData()
    fromData.append('slice',slice)
    fromData.append('fileName',fileName)
    fromData.append('index',index)
    
    const xhr = new XMLHttpRequest()
    xhr.open('POST','sliceUplod',true)
    xhr.onreadystatechange = ()=>uploadCallBack(xhr,slice,index,fileName)
    xhr.send(formData)
}

function uploadCallBack(shr,slice,index,fileName){
    if(xhr.readyState === 4&&xhr.status==200){
        hasSendNum++
        console.log(`第${index}片，完成度${hasSendNum/totalSlices}`)
    }else{
        console.log("上传失败，重试")
        uploadFile(slice, index,fileName)
    }
}

```

## 二、并发上传

## 三、断点续传

## 四、TUS协议

tangchenc/共享知识库

简介

发行版

贡献者

近期动态

tangchenc/共享知识库 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

tangchenc/共享知识库