原生JS上传大文件分片

上传大文件分片是一种常见的上传方式，可以有效地避免上传过程中出现网络中断等问题导致的上传失败。下面是一个使用原生JS实现上传大文件分片的示例代码：

 

javascript 
// 定义上传文件的分片大小 
const CHUNK_SIZE = 1024 * 1024; // 1MB 
 
// 获取文件的MD5值 
function getFileMD5(file) { 
  return new Promise((resolve, reject) => { 
    const reader = new FileReader(); 
    reader.onload = () => { 
      const spark = new SparkMD5.ArrayBuffer(); 
      spark.append(reader.result); 
      const md5 = spark.end(); 
      resolve(md5); 
    }; 
    reader.onerror = reject; 
    reader.readAsArrayBuffer(file); 
  }); 
} 
 
// 分片上传文件 
async function uploadFile(file) { 
  const fileSize = file.size; 
  const fileMD5 = await getFileMD5(file); 
  const totalChunks = Math.ceil(fileSize / CHUNK_SIZE); 
  let uploadedChunks = 0; 
  let uploadedSize = 0; 
  while (uploadedChunks < totalChunks) { 
    const start = uploadedChunks * CHUNK_SIZE; 
    const end = Math.min(start + CHUNK_SIZE, fileSize); 
    const chunk = file.slice(start, end); 
    const formData = new FormData(); 
    formData.append('file', chunk); 
    formData.append('fileMD5', fileMD5); 
    formData.append('chunkIndex', uploadedChunks); 
    formData.append('totalChunks', totalChunks); 
    const response = await fetch('/upload', { 
      method: 'POST', 
      body: formData, 
    }); 
    const result = await response.json(); 
    if (result.success) { 
      uploadedChunks++; 
      uploadedSize += chunk.size; 
      const progress = Math.floor((uploadedSize / fileSize) * 100); 
      console.log(`Uploaded ${progress}%`); 
    } else { 
      console.error(result.message); 
    } 
  } 
  console.log('Upload complete!'); 
} 

 

上述代码中，我们首先定义了上传文件的分片大小为1MB，然后使用SparkMD5库计算文件的MD5值。接着，我们根据文件大小和分片大小计算出需要上传的总分片数，并在循环中逐个上传每个分片。在上传每个分片时，我们使用FormData对象将分片数据和其他参数一起发送到服务器端。上传成功后，我们更新已上传的分片数和已上传的文件大小，并计算上传进度。最后，当所有分片上传完成时，我们输出上传完成的消息。

 

需要注意的是，上述代码中的上传接口地址为`/upload`，需要根据实际情况进行修改。另外，由于分片上传涉及到文件的MD5值计算和网络请求等操作，因此建议使用异步函数或Promise等方式进行处理，以避免阻塞UI线程。

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/14/%e5%8e%9f%e7%94%9fjs%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87-2/

欢迎入群一起讨论