现在来看看在上面提到的几种上传方式中实现大文件上传会遇见的超时问题，

表单上传和iframe无刷新页面上传，实际上都是通过form标签进行上传文件，这种方式将整个请求完全交给浏览器处理，当上传大文件时，可能会遇见请求超时的情形通过fromData，其实际也是在xhr中封装一组请求参数，用来模拟表单请求，无法避免大文件上传超时的问题编码上传，我们可以比较灵活地控制上传的内容

大文件上传最主要的问题就在于：在同一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。试想，如果我们将这个请求拆分成多个请求，每个请求的时间就会缩短，且如果某个请求失败，只需要重新发送这一次请求即可，无需从头开始，这样是否可以解决大文件上传的问题呢？

综合上面的问题，看来大文件上传需要实现下面几个需求

支持拆分上传请求(即切片)支持断点续传支持显示上传进度和暂停上传

文件切片

编码方式上传中，在前端我们只要先获取文件的二进制内容，然后对其内容进行拆分，最后将每个切片上传到服务端即可。

在JavaScript中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice，通过这个方法，我们就可以对二进制文件进行拆分。

下面是一个拆分文件的示例：

function slice(file, piece = 1024 * 1024 * 5) {

let totalSize = file.size; // 文件总大小

let start = 0; // 每次上传的开始字节

let end = start + piece; // 每次上传的结尾字节

let chunks = []

while (start < totalSize) {

// 根据长度截取每次需要上传的数据

// File对象继承自Blob对象，因此包含slice方法

let blob = file.slice(start, end);

chunks.push(blob)

start = end;

end = start + piece;

}

return chunks

}

将文件拆分成piece大小的分块，然后每次请求只需要上传这一个部分的分块即可：

let file = document.querySelector("[name=file]").files[0];

const LENGTH = 1024 * 1024 * 0.1;

let chunks = slice(file, LENGTH); // 首先拆分切片

chunks.forEach(chunk=>{

let formdata = new FormData();

formdata.append("file", chunk);

post('/url', formdata)

})

服务器接收到这些切片后，再将他们拼接起来就可以了。

服务端还需有必要修改nginx的server配置，否则大文件可能会提示 413 Request Entity Too Large 的错误。

server {

// ...

client_max_body_size 50m;

}

上面这种方式来存在一些问题

无法识别一个切片是属于哪一个切片的，当同时发生多个请求时，追加的文件内容会出错切片上传接口是异步的，无法保证服务器接收到的切片是按照请求顺序拼接的

因此接下来我们来看看应该如何在服务端还原切片。

还原切片

在后端需要将多个相同文件的切片还原成一个文件，上面这种处理切片的做法存在下面几个问题

如何识别多个切片是来自于同一个文件的，这个可以在每个切片请求上传递一个相同文件的context参数如何将多个切片还原成一个文件确认所有切片都已上传，这个可以通过客户端在切片全部上传后调用mkfile接口来通知服务端进行拼接找到同一个context下的所有切片，确认每个切片的顺序，这个可以在每个切片上标记一个位置索引值按顺序拼接切片，还原成文件

上面有一个重要的参数，即context，我们需要获取为一个文件的唯一标识，可以通过下面两种方式获取

根据文件名、文件长度等基本信息进行拼接，为了避免多个用户上传相同的文件，可以再额外拼接用户信息如uid等保证唯一性根据文件的二进制内容计算文件的hash，这样只要文件内容不一样，则标识也会不一样，缺点在于计算量比较大.

修改上传代码，增加相关参数：

// 获取context，同一个文件会返回相同的值

function createContext(file) {

return file.name + file.length

}

let file = document.querySelector("[name=file]").files[0];

const LENGTH = 1024 * 1024 * 0.1;

let chunks = slice(file, LENGTH);

// 获取对于同一个文件，获取其的context

let context = createContext(file);

let tasks = [];

chunks.forEach((chunk, index) => {

let fd = new FormData();

fd.append("file", chunk);

// 传递context

fd.append("context", context);

// 传递切片索引值

fd.append("chunk", index + 1);

tasks.push(post("/upload-chunk", fd));

});

// 所有切片上传完毕后，调用mkfile接口

Promise.all(tasks).then(res => {

let fd = new FormData();

fd.append("context", context);

fd.append("chunks", chunks.length);

post("/upload-complete", fd).then(res => {

console.log(res);

});

});

后端在upload-complete接口中就可以通过context来保存同一个文件相关的切片。

除了上面这种简单通过目录区分切片的方法之外，服务端还可以将切片信息保存在数据库来进行索引，通过context和index，对归属同一个context的切片，避免信息丢失的进行顺序拼接。

这样就解决了上面的两个问题：

识别切片来源保证切片拼接顺序

断点续传

即使将大文件拆分成切片上传，我们仍需等待所有切片上传完毕，在等待过程中，可能发生一系列导致部分切片上传失败的情形，如网络故障、页面关闭等。由于切片未全部上传，因此无法通知服务端合成文件。这种情况下可以通过断点续传来进行处理。

断点续传指的是：可以从已经上传部分开始继续上传未完成的部分，而没有必要从头开始上传，节省上传时间。

由于整个上传过程是按切片维度进行的，且mkfile接口是在所有切片上传完成后由客户端主动调用的，因此断点续传的实现也十分简单：

在切片上传成功后，保存已上传的切片信息当下次传输相同文件时，遍历切片列表，只选择未上传的切片进行上传所有切片上传完毕后，再调用mkfile接口通知服务端进行文件合并

因此问题就落在了如何保存已上传切片的信息了，保存一般有两种策略

可以通过locaStorage等方式保存在前端浏览器中，这种方式不依赖于服务端，实现起来也比较方便，缺点在于如果用户清除了本地文件，会导致上传记录丢失服务端本身知道哪些切片已经上传，因此可以由服务端额外提供一个根据文件context查询已上传切片的接口，在上传文件前调用该文件的历史上传记录

下面让我们通过在本地保存已上传切片记录，来实现断点上传的功能：

// 获取已上传切片记录

function getUploadSliceRecord(context){

let record = localStorage.getItem(context)

if(!record){

return []

}else {

try{

return JSON.parse(record)

}catch(e){ }

}

}

// 保存已上传切片

function saveUploadSliceRecord(context, sliceIndex){

let list = getUploadSliceRecord(context)

list.push(sliceIndex)

localStorage.setItem(context, JSON.stringify(list))

}

然后对上传逻辑稍作修改，主要是增加上传前检测是已经上传、上传后保存记录的逻辑

let context = createContext(file);

// 获取上传记录

let record = getUploadSliceRecord(context);

let tasks = [];

chunks.forEach((chunk, index) => {

// 已上传的切片则不再重新上传

if(record.includes(index)){

return

}

let fd = new FormData();

fd.append("file", chunk);

fd.append("context", context);

fd.append("chunk", index + 1);

let task = post("/mkblk.php", fd).then(res=>{

// 上传成功后保存已上传切片记录

saveUploadSliceRecord(context, index)

record.push(index)

})

tasks.push(task);

});

此时上传时刷新页面或者关闭浏览器，再次上传相同文件时，之前已经上传成功的切片就不会再重新上传了。

服务端实现断点续传的逻辑基本相似，只要在 getUploadSliceRecord 内部调用服务端的查询接口获取已上传切片的记录即可，因此这里不再展开。

此外断点续传还需要考虑切片过期的情况：如果调用了complete 接口，则磁盘上的切片内容就可以清除掉了，如果客户端一直不调用 complete 的接口，放任这些切片一直保存在磁盘显然是不可靠的，一般情况下，切片上传都有一段时间的有效期，超过该有效期，就会被清除掉。基于上述原因，断点续传也必须同步切片过期的实现逻辑。

上传进度和暂停

通过xhr.upload中的 progress 方法可以实现监控每一个切片上传进度。

上传暂停的实现也比较简单，通过xhr.abort可以取消当前未完成上传切片的上传，实现上传暂停的效果，恢复上传就跟断点续传类似，先获取已上传的切片列表，然后重新发送未上传的切片。

内容出处：牛客网前端工程师宝典