1. 分片上传

1. 把需要上传的文件按照一定的规则，分割成相同大小的数据块

2. 初始化一个分片上传任务，返回本次分片上传的唯一标识

3. 按照一定的规则把各个数据块上传

4. 发送完成后，服务端会判断数据上传的完整性，如果完整，那么就会把数据合并成原始文件

2. 断点续传

1. 切割文件，将要上传的文件切割成多个小文件片段。可以使用JavaScript的File API中的slice方法来实现。

2. 上传文件片段，使用XMLHttpRequest或者Fetch API发送每个文件片段到后端，并携带相关信息，如文件名、文件ID、当前片段序号等。

3. 后端接收并保存文件片段，后端接收到每个文件片段后，将其保存在临时位置，并记录文件片段的序号和文件ID等信息。

4. 续传处理，如果上传过程中断，下次继续上传时，通过查询后端已保存的文件片段信息，得知已经成功上传的文件片段，从断点处继续上传剩余的文件片段。

5. 合并文件，当所有文件片段都上传完成后，后端根据文件ID将所有片段合并成完整的文件。

分片上传和断点续传的异同

区别：

分段上传：将一个大文件切割成多个小部分进行上传，每个小部分的大小可以根据具体需求来确定。这种方法可以减少单个请求的数据量，提高上传效率，并且可以在上传失败后只重新上传失败的部分，而不需要重新上传整个文件。常见的例子包括百度网盘、腾讯微云等。

断点续传：当文件上传过程中出现网络断开或其他异常情况时，可以通过记录已上传的部分，下次从上次上传的位置继续上传。这种方法可以保证上传的连续性，避免上传失败后需要重新上传整个文件，同时也可以提高上传效率。常见的例子包括云存储、视频网站等。

相似之处：

都需要使用特殊的上传方式或协议来支持分段上传或断点续传。例如，HTTP协议默认并不支持断点续传，需要在服务器端做特殊处理。

都需要在前端和后端做相应的处理来支持。在前端，需要将大文件切割成多个小部分并发送到后端；在后端，需要接收和保存上传的文件片段，并在最后将它们合并成一个完整的文件。

分片上传示例

/* HTML部分 */
<input type="file" id="fileInput" />
<button onclick="upload()">上传</button>/* JavaScript部分 */
function upload() {const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const chunkSize = 1024 * 1024; // 每个分片的大小，这里设置为1MBconst totalChunks = Math.ceil(file.size / chunkSize); // 总分片数let currentChunk = 0; // 当前上传的分片// 读取并上传分片function uploadChunk(start, end) {const chunk = file.slice(start, end);const formData = new FormData();formData.append('file', chunk);formData.append('chunk', currentChunk);formData.append('chunks', totalChunks);// 发送POST请求上传分片fetch('/upload', {method: 'POST',body: formData}).then(response => response.json()).then(data => {if (data.success) {// 继续上传下一个分片currentChunk++;if (currentChunk < totalChunks) {const start = currentChunk * chunkSize;const end = start + chunkSize;uploadChunk(start, end);} else {console.log('文件上传完成');}} else {console.log('上传失败');}}).catch(error => {console.error('上传出错', error);});}// 开始上传第一个分片const start = currentChunk * chunkSize;const end = start + chunkSize;uploadChunk(start, end);
}