【JS】前端分片上传大文件（支持1G以上的超大文件）

在前端上传超大文件时，可以使用Blob对象进行文件的分片处理，然后将分片发送到服务器端进行合并。以下是一个简单的示例，展示了如何实现文件的分片上传：

function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 每个分片的大小，这里设置为1MB
  let fileSize = file.size;
  let chunkCount = Math.ceil(fileSize / chunkSize);
  
  let chunkIndex = 0;
  
  function uploadChunk() {
    let start = chunkIndex * chunkSize;
    let end = Math.min(fileSize, start + chunkSize);
    
    // 切割文件分片
    let chunk = file.slice(start, end);
    
    // 这里使用FormData发送分片，你也可以使用其他方式发送，比如通过fetch或者XMLHttpRequest
    let formData = new FormData();
    formData.append('file', chunk);
    formData.append('fileName', file.name);
    formData.append('chunkIndex', chunkIndex);
    formData.append('chunkCount', chunkCount);
    
    // 发送分片到服务器
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        chunkIndex++;
        if (chunkIndex < chunkCount) {
          uploadChunk(); // 继续上传下一个分片
        } else {
          console.log('文件上传完成');
        }
      } else {
        console.error('文件上传失败', data.error);
      }
    })
    .catch(error => {
      console.error('文件上传出错', error);
    });
  }
  
  uploadChunk(); // 开始上传第一个分片
}
 
// 使用示例
const input = document.createElement('input');
input.type = 'file';
input.onchange = function() {
  if (this.files.length > 0) {
    uploadFile(this.files[0]);
  }
};
input.click();

在服务器端，你需要实现接收分片并合并文件的逻辑。以下是一个简单的服务器端示例，使用Node.js和Express实现：

const express = require('express');
const fs = require('fs');
const multer = require('multer');
const app = express();
 
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + req.body.fileName)
  }
})
 
const upload = multer({ storage: storage });
 
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  const fileName = req.body.fileName;
  const chunkIndex = parseInt(req.body.chunkIndex);
  const filePath = `uploads/${fileName}`;
  
  // 创建分片文件夹，如果不存在
  if (!fs.existsSync('uploads')) {
    fs.mkdirSync('uploads');
  }
  
  // 创建文件，如果不存在
  if (!fs.existsSync(filePath)) {
    fs.writeFileSync(filePath, '');
  }
  
  //