JavaScript实现大文件上传的示例代码

2023年5月27日上午7:16 • JavaScript

让我为您详细讲解JavaScript实现大文件上传的完整攻略。

1. 概述

在网页上传大文件时，为了提高用户体验，通常会采用分片上传的方式，即将大文件分为若干个小块逐个上传，上传成功之后再将这些小块合并成一个完整的文件。而在实现分片上传时，JavaScript是必不可少的。

2. 实现步骤

下面是一份JavaScript实现大文件上传的示例代码，包括以下步骤：

步骤1：获取文件信息

获取文件信息，包括文件名、文件大小等等，可以通过File对象的属性来获取，如下所示：

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const fileSize = file.size;
const fileName = file.name;

步骤2：计算文件Hash值

计算文件Hash值是为了确保文件上传的安全性，可以通过SparkMD5等第三方库来计算文件Hash值，代码如下所示：

const spark = new SparkMD5.ArrayBuffer();
const reader = new FileReader();
reader.readAsArrayBuffer(file.slice(0, 1024 * 1024 * 10)); // 只计算文件的前10MB

reader.onload = e => {
  spark.append(e.target.result);
  const hash = spark.end();
  console.log(`文件Hash值为${hash}`);
}

步骤3：分片上传

分片上传是将文件分成若干小块逐个上传，可使用XMLHttpRequest（简称XHR）对象的upload事件来实现上传进度的监控，代码如下所示：

const chunkSize = 1024 * 1024; // 每个分片大小为1MB
const chunkCount = Math.ceil(fileSize / chunkSize); // 分片数
let currentChunk = 0;
const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', e => {
  // 监控上传进度
  const percent = ((e.loaded + currentChunk * chunkSize) / fileSize * 100).toFixed(2);
  console.log(`已上传${percent}%`);
});

xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    // 分片上传成功，继续上传下一个分片
    currentChunk++;
    if (currentChunk < chunkCount) {
      uploadChunk();
    } else {
      // 所有分片上传完毕，进行合并操作
      mergeChunks();
    }
  }
};

const uploadChunk = () => {
  const start = currentChunk * chunkSize;
  const end = Math.min(start + chunkSize, fileSize);
  const chunk = file.slice(start, end);
  xhr.send(chunk);
}

步骤4：合并文件

分片上传之后，需要将所有小块合并成一个完整的文件，可以使用服务端脚本来实现文件的合并，如PHP或Node.js等。

3. 示例说明

示例一：使用FormData对象上传文件

可以使用FormData对象来模拟表单上传文件，在JavaScript中实现代码如下所示：

const formData = new FormData();
formData.append('file', file);
formData.append('hash', hash);
formData.append('fileName', fileName);

fetch('/api/upload', {
  method: 'POST',
  body: formData,
}).then(res => {
  console.log('上传成功');
}).catch(error => {
  console.error(error);
});

示例二：使用Web Worker计算文件Hash值

为了不让计算Hash值的过程影响页面的渲染，并确保计算文件Hash值的效率，可以使用Web Worker来实现多线程计算，代码如下所示：

const worker = new Worker('/js/hash.worker.js');
worker.addEventListener('message', e => {
  const hash = e.data;
  console.log(`文件Hash值为${hash}`);
});

worker.postMessage({ file: file, size: 1024 * 1024 * 10 });

hash.worker.js文件的代码如下所示：

self.importScripts('/lib/spark-md5.min.js');
self.addEventListener('message', e => {
  const file = e.data.file;
  const size = e.data.size;
  const spark = new self.SparkMD5.ArrayBuffer();

  const reader = new self.FileReader();
  reader.readAsArrayBuffer(file.slice(0, size)); // 只计算文件的前size

  reader.onload = event => {
    spark.append(event.target.result); // 数据读取完成后添加数据
    const hash = spark.end();
    self.postMessage(hash); // 计算完成后将Hash值返回给主线程
  }
});