js实现分割上传大文件

实现分割上传大文件有几种不同的方法，其中一种比较流行的方式是将文件拆分成多个分片，然后分别上传，最后合并成完整的文件。以下是实现该方法的完整攻略。

1. 拆分文件

首先，我们需要将要上传的大文件拆分成若干个分片。拆分文件的大小可以定为50MB-100MB左右，但具体大小根据需要和实际情况而定。以下示例代码使用FileReader来读取文件数据并拆分文件。

const BYTES_PER_CHUNK = 50 * 1024 * 1024; // 分片大小为50MB
const input = document.querySelector('input[type="file"]');
const file = input.files[0];
let offset = 0;

function uploadChunk() {
  const chunk = file.slice(offset, offset + BYTES_PER_CHUNK);
  const formData = new FormData();
  formData.append('chunk', chunk);

  // 将分片上传至服务器
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((response) => {
    console.log(response);
    offset += BYTES_PER_CHUNK;
    if (offset < file.size) {
      uploadChunk();
    } else {
      console.log('All chunks uploaded successfully');
    }
  }).catch((error) => {
    console.error(error);
  });
}

uploadChunk();

在上面的代码中，我们使用了FileReader和Blob.slice()方法来拆分文件并上传分片。FileReader.readAsArrayBuffer()方法可以读取文件数据并返回一个ArrayBuffer对象，Blob.slice()方法可以从文件中获取指定范围的二进制数据。

2. 上传分片

接下来，我们需要将已经拆分的文件分别上传至服务器。在上传文件时，需要传递文件的分片编号和总分片数等参数。以下示例代码使用了XMLHttpRequest来上传文件分片。

const BYTES_PER_CHUNK = 50 * 1024 * 1024; // 分片大小为50MB
const input = document.querySelector('input[type="file"]');
const file = input.files[0];
const totalChunks = Math.ceil(file.size / BYTES_PER_CHUNK);
let currentChunk = 0;

function uploadChunk() {
  const chunk = file.slice(currentChunk * BYTES_PER_CHUNK,
    (currentChunk + 1) * BYTES_PER_CHUNK);
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('filename', file.name);
  formData.append('totalChunks', totalChunks);
  formData.append('currentChunk', currentChunk);

  xhr.open('POST', '/upload-chunk', true);
  xhr.onload = function () {
    if (++currentChunk < totalChunks) {
      uploadChunk();
    } else {
      console.log('All chunks uploaded successfully');
    }
  };
  xhr.onerror = function (error) {
    console.error(error);
  };
  xhr.send(formData);
}

uploadChunk();

在上面的代码中，我们使用了XMLHttpRequest和FormData对象来上传文件分片。FormData对象可以将上传数据以键值对的形式存储，XMLHttpRequest.send()方法可以将数据发送至服务器。

3. 合并文件

最后，我们需要在服务器端将所有分片合并成一个完整的文件。我们可以将所有分片的数据存储在数组中，然后使用Buffer.concat()方法合并成一个Buffer对象，最后将Buffer对象写入到文件中。以下示例代码演示如何在Node.js中实现文件合并。

const fs = require('fs');
const path = require('path');
const uploadPath = path.join(__dirname, 'uploads');

function combineChunks(filename, totalChunks) {
  const chunks = [];
  for (let i = 0; i < totalChunks; i++) {
    const chunkPath = path.join(uploadPath, `${filename}.${i}`);
    const buffer = fs.readFileSync(chunkPath);
    chunks.push(buffer);
  }
  const filePath = path.join(uploadPath, filename);
  fs.writeFileSync(filePath, Buffer.concat(chunks));
  console.log('File combined successfully');
}

在上面的代码中，我们使用了fs.readFileSync()和fs.writeFileSync()方法分别读取分片文件和写入完整文件。Buffer对象可以将多个ArrayBuffer对象合并成一个。

这就是实现分割上传大文件的完整攻略。在实际应用中，还需要考虑上传进度、断点续传等问题。