前端大文件切片上传_file.prototype.slice-CSDN博客

本文链接：https://blog.csdn.net/freeman_xv1/article/details/136391745

文件切片上传的思路：

将大文件通过加密算法生成编码
找后端验证是否有此文件
若有此文件，则无需上传，若没有此文件，则将大文件分割成若干个切片
将若干个切片通过加密算法生成编码传给后端
所有分片上传结束后，走后端合并接口合并分片，则大文件上传成功。

文件切片上传

// 文件切割的大小
window.FILE_SLICE_SIZE = 1024 * 1024

async function sliceUpload(file){
  // 使用crc32加密算法，生成当前文件的唯一编码（这个编码在相同文件时生成编码时是一样的）
  let fileCrc32 = (await fileToCrc32(file))
  // 切片文件
  let sliceFileList = await createFileChunk(file,window.FILE_SLICE_SIZE)
  // 计算切片（使用crc32加密算法，生成每个分片的唯一编码）
  let sliceFileToCrc32List = await sliceFileToCrc32All(sliceFileList)

  // 创建一个分片上传失败队列，用于在上传失败时重新上传
  let sliceErrorList = []

  // 秒传接口，用来判断是否有此文件
  fileApass(file.name,fileCrc32).then(async (apassRes)=>{
    if(apassRes.code === 4648){ // 没有相同文件,正常上传
      for(let i=0;i<sliceFileToCrc32List.length;i++){
        // 检查是否存在切片（如果有此分片，则无需上传）
        let sliceRes = await axios.get(preResult.data.splitCheckUrl,{