前端实现文件分片上传

时间：2025-04-05 10:39:50

介绍前端上传大文件的常见问题和解决方案，分片上传

这样可以避免一次性上传大文件导致的网络超时、内存溢出、进度不可控等问题。

要实现大文件分片上传，通常需要以下几个步骤：

1.通过DOM获取文件对象，并且对文件进行MD5加密（文件内容+文件标题形式），采用SparkMD5进行文件加密；

2.进行分片设置，利用Blob的slice方法进行文件分片处理，并且依次进行上传；

3.当分片文件上传完成后，请求合并接口后端进行文件合并处理即可。

一个简单的js代码示例如下：

// 获取input元素
var input = ("file");
// 获取选择的第一个文件
var file = [0];
// 文件大于5MB时，设置每个分片大小为5MB
var chunkSize = 5 * 1024 * 1024;
// 计算总共有多少个分片
var totalChunks = ( / chunkSize);
// 定义一个数组存放所有的分片
var chunks = [];
// 遍历所有的分片
for (var i = 0; i < totalChunks; i++) {
  // 利用slice方法获取每个分片
  var start = i * chunkSize;
  var end = (, start + chunkSize);
  var blob = (start, end);
  // 将每个分片添加到数组中
  (blob);
}
// 定义一个变量存放当前正在上传的分片索引
var currentChunk = 0;
// 定义一个函数用于递归地上传每个分片
function upload() {
  // 如果当前索引等于总数，则说明所有分片都已经上传完成，请求合并接口即可
  if (currentChunk === totalChunks) {
    ("All chunks uploaded!");
    // 请求合并接口（省略）
    return;
  }
  // 获取当前要上传的分片对象
  var chunk = chunks[currentChunk];
  // 创建一个表单数据对象，添加相关信息（如MD5值、索引、总数等）
  var formData = new FormData();
  ("file", chunk);
  ("md5", file.md5); // 假设已经计算好了MD5值（省略）
  ("index", currentChunk);
  ("total", totalChunks);

  // 创建一个XMLHttpRequest对象，发送POST请求到服务器端（假设地址为/upload）
  var xhr = new XMLHttpRequest();
  ("POST", "/upload");
  // 监听请求状态变化事件
   = function () {
    if ( === ) {
      if ( === 200) {
        ("Chunk " + currentChunk + " uploaded!");
        // 如果成功，则递增索引，并继续调用upload函数
        currentChunk++;
        upload();
      } else {
        ("Upload failed")
        // 如果失败，则重试或者提示错误信息（省略）
      }
    }
  };
  // 发送表单数据对象
  (formData);
}
// 调用upload函数开始上传第一个分片
upload();

扩充知识库，如有问题请指正

相关文章