妙用JavaScript：轻松实现大文件上传

2023-09-04 02:57:04

轻松实现大文件上传：分块上传指南

随着互联网技术的蓬勃发展，我们经常需要传输巨型文件，例如高清视频和庞大的软件安装包。传统的方法，如 HTTP 上传，在这个场景下就显得力不从心了，容易导致超时、中断等问题。为了解决这些痛点，分块上传 应运而生，它将大文件切分成小块，逐块传输到服务器，大大提升了上传的可靠性。

分块上传原理

分块上传的原理非常巧妙：将庞大的文件分成一个个小块，类似于我们拼图时将一副大图拆解成小块，然后依次拼装。服务器接收到这些小块后，就像拼图一样将其重新组合成一个完整的文件。这种方法有效降低了超时和中断的风险，显著提高了上传效率和稳定性。

分块上传实现

要实现分块上传，需要依次完成以下几个步骤：

确定分块大小： 根据文件大小和服务器承受能力，确定每个小块的大小，一般在 1MB 到 10MB 之间。
创建 FormData 对象： FormData 对象是 HTML5 中一个强大的工具，可以方便地存储分块数据。
使用 XMLHttpRequest 对象： XMLHttpRequest 对象是 JavaScript 中发送 HTTP 请求的利器，利用它可以将分块数据逐块发送到服务器。
监听上传进度： XMLHttpRequest 对象提供了 onprogress 事件，可以实时获取上传进度，方便我们掌握上传状态。
合并文件： 当所有分块都顺利上传后，我们需要将这些分块重新组合成一个完整的文件。

代码示例

以下是一个分块上传的代码示例：

// 创建 FormData 对象
const formData = new FormData();

// 将文件分块
const file = document.getElementById('file').files[0];
const chunkSize = 1024 * 1024; // 1MB
const chunks = Math.ceil(file.size / chunkSize);

for (let i = 0; i < chunks; i++) {
  const start = i * chunkSize;
  const end = start + chunkSize;
  const chunk = file.slice(start, end);
  formData.append(`chunk${i}`, chunk);
}

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求头
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

// 监听上传进度
xhr.upload.onprogress = function(e) {
  const progress = Math.round(e.loaded / e.total * 100);
  console.log(`上传进度：${progress}%`);
};

// 发送请求
xhr.send(formData);

// 合并文件
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    const fileUrl = response.fileUrl;
    console.log(`文件已上传成功，文件地址：${fileUrl}`);
  } else {
    console.log('上传失败');
  }
};