当前位置：首页 > JavaScript

js实现分段上传

2026-04-07 13:11:11JavaScript

分段上传的实现方法

在JavaScript中实现分段上传通常涉及将大文件分割成小块，逐块上传并在服务器端合并。以下是常见的实现方式：

使用XMLHttpRequest或Fetch API

通过前端JavaScript将文件切片，使用AJAX技术逐块上传：

function uploadFileInChunks(file, chunkSize = 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize);
  let chunkNumber = 0;

  function uploadChunk() {
    const start = chunkNumber * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkNumber', chunkNumber);
    formData.append('totalChunks', totalChunks);
    formData.append('fileId', file.name + '-' + file.size);

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      chunkNumber++;
      if (chunkNumber < totalChunks) {
        uploadChunk();
      } else {
        console.log('Upload complete');
      }
    });
  }

  uploadChunk();
}

使用Resumable.js等库

Resumable.js是专门处理大文件分段上传的JavaScript库：

js实现分段上传

const r = new Resumable({
  target: '/upload',
  chunkSize: 1*1024*1024,
  simultaneousUploads: 3,
  testChunks: true
});

r.assignBrowse(document.getElementById('browseButton'));
r.assignDrop(document.getElementById('dropTarget'));

r.on('fileAdded', function(file) {
  r.upload();
});

r.on('fileSuccess', function(file) {
  console.log(file.fileName + ' uploaded');
});

服务器端处理

服务器端需要实现以下功能：

接收分块并临时存储
验证分块完整性
合并所有分块为完整文件
处理上传中断后的恢复

Node.js示例（Express框架）：

js实现分段上传

app.post('/upload', (req, res) => {
  const chunk = req.files.chunk;
  const chunkNumber = req.body.chunkNumber;
  const totalChunks = req.body.totalChunks;
  const fileId = req.body.fileId;

  const tempDir = `./temp/${fileId}`;
  if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir);

  chunk.mv(`${tempDir}/${chunkNumber}`, (err) => {
    if (err) return res.status(500).send(err);

    if (parseInt(chunkNumber) === parseInt(totalChunks) - 1) {
      mergeChunks(fileId, totalChunks);
    }

    res.status(200).send('Chunk uploaded');
  });
});

function mergeChunks(fileId, totalChunks) {
  const tempDir = `./temp/${fileId}`;
  const writeStream = fs.createWriteStream(`./uploads/${fileId}`);

  for (let i = 0; i < totalChunks; i++) {
    const chunk = fs.readFileSync(`${tempDir}/${i}`);
    writeStream.write(chunk);
  }

  writeStream.end();
  fs.rmdirSync(tempDir, { recursive: true });
}

进度监控

实现上传进度监控：

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(percentComplete + '% uploaded');
  }
}, false);

断点续传

实现断点续传需要：

前端记录已上传的分块
服务器端提供已接收分块信息接口
上传前检查哪些分块需要上传

function checkUploadStatus(fileId, totalChunks) {
  return fetch(`/upload-status?fileId=${fileId}`)
    .then(res => res.json())
    .then(data => {
      const uploadedChunks = data.chunks || [];
      return Array.from({length: totalChunks}, (_, i) => i)
        .filter(i => !uploadedChunks.includes(i));
    });
}