可恢复的文件上传

对于大文件（如果我们可能需要恢复），可恢复的上传应该带有上传进度提示，由于 fetch 不允许跟踪上传进度，我们将会使用 XMLHttpRequest 方法。

要恢复上传，我们需要 确切地 知道服务器接收的字节数，并从上一次暂停部分继续传输。

基本算法步骤：

1. 首先创建一个文件 id，以唯一地标识我们要上传的文件，在恢复上传时以告诉服务器我们要恢复的内容。
   js

   // 基于 文件名-文件大小-文件最后修改日期 创建文件的唯一标识
   let fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate;
   

2. 向服务器发送一个请求，询问它已经接收到多少字节
   js

   let response = await fetch('status', {
     headers: {
       'X-File-Id': fileId   // 假设服务器通过 X-File-Id header 跟踪文件上传
     }
   });
   
   // 服务器已有的字节数
   let startByte = +await response.text();
   

3. 使用 Blob 和 slice 方法来发送从 startByte 开始的文件剩余部分
   js

   xhr.open("POST", "upload", true);
   
   // 文件 id，以便服务器知道我们要恢复的是哪个文件
   xhr.setRequestHeader('X-File-Id', fileId);
   
   // 发送我们要从哪个字节开始恢复，因此服务器知道我们正在恢复（而不是重新上传它）
   xhr.setRequestHeader('X-Start-Byte', startByte);
   
   // 监听上传进度（加上断点前已上传的字节数）
   xhr.upload.onprogress = (e) => {
     console.log(`Uploaded ${startByte + e.loaded} of ${startByte + e.total}`);
   };
   
   // 文件可以是来自 input.files[0]，或者另一个源
   xhr.send(file.slice(startByte));
   

具体的断点上传实例可查看：可恢复的文件上传