前端大文件分片上传

1.分片上传整体流程

• 开始上传：前端启动文件分片上传。后端返回唯一标识。
• 分片上传：获取到上传的文件，然后设置一个固定的分片大小，将文件切成多个小片，计算出每一个分片的MD5值（32位）。将每个分片的内容和MD5标识符一同上传至服务器。服务端接收每个分片及相关信息后，通过对每个分片进行校验，来确保分片的完整性。
• 结束上传：当分片上传完毕或者前端取消上传时，调用结束上传接口结束此次文件上传操作。结束上传时，服务端判断是正常结束或取消上传来决定后续操作。

  

  2.前端具体流程

  • 开始上传，发送开始上传请求，向服务器传递文件名、文件总大小、分片总数和切片大小，获取并保存文件上传的唯一标识符。同时在发送请求前，对上传的文件名进行校验，如果文件名超过最大长度256，则禁止发送请求并向用户提示修改文件名称。
  • 分片上传，首先将文件进行切片，调用切片方法时，需要将文件传递给该方法，然后根据文件的大小来决定每个分片的大小并切分成多个片段，同时计算出总切片数，并为每个切片添加从0开始的顺序索引。随后对每个切片计算出他们的MD5值。最后把这些分片的MD5值和顺序索引保存在浏览器内存中。然后发送上传数据请求，向服务器发送唯一标识符、分片的顺序索引、分片数据，MD5值和当前分片的大小。在每个分片发送请求后，如果发送成功，则将其对应的信息从浏览器内存中删除，并计算出此时的上传进度，然后发送下一个片段直至最后。如果全部上传成功，清空浏览器内存。如果请求发生错误，则对该分片再次发送一次上传请求，如果仍然错误，不再上传，调用结束请求并提示错误原因。
  • 结束上传，如果文件分片全部成功上传，向服务器发送结束请求，传递正常结束状态码，清空浏览器内存。如果主动取消上传则传递取消请求状态码，同时清空浏览器内存，不再继续上传。

    3.部分代码

    //文件切片，utils
    import SparkMD5 from 'spark-md5'
    export async function getChunkList (files) {
    	const file = files
    	console.log(file);
    	const fileSize = file.size // 文件大小
    	const fileName = file.name
    	let chunkSize = 0;
    	if (fileSize