js：File大文件分片为小文件Blob

最新推荐文章于 2025-03-17 16:52:58 发布

彭世瑜

最新推荐文章于 2025-03-17 16:52:58 发布

阅读量676

点赞数

文章标签： javascript 前端开发语言

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/128855173

版权

该代码示例展示了如何使用JavaScript将文件拆分为小块（chunk），利用File对象的slice方法进行分片操作。当用户选择文件后，会将文件按指定大小（默认2MB）切分成多个块并打印到控制台。这在大文件上传或断点续传场景中很有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现代码

/**
* 文件分片
 */
function getFileChunks(file, chunkSize) {
  let chunks = []

  // 默认分片大小 2MB
  let defaultChunkSize = 1024 * 1024 * 2
  chunkSize = chunkSize || defaultChunkSize

  let blobSlice =
    File.prototype.slice ||
    File.prototype.mozSlice ||
    File.prototype.webkitSlice

  let current = 0
  while (current < file.size) {
    let chunk = blobSlice.call(file, current, current + chunkSize)

    chunks.push(chunk)

    current += chunkSize
  }

  return chunks
}

<input
      type="file"
      id="file"
    />

<script>
  document.querySelector('#file').addEventListener('change', function (e) {
    let file = e.target.files[0]
    let chunks = getFileChunks(file, 1024 * 1)
    console.log(chunks)
  })
</script>