1.Resumable.js 是一個(gè)開(kāi)源的 JavaScript 庫(kù)，專(zhuān)為大文件（如 MP4）設(shè)計(jì)，支持分片上傳。它可以將一個(gè)大的文件分成多個(gè)小塊進(jìn)行上傳，每個(gè)小塊上傳完成后再上傳下一個(gè)。它還支持?jǐn)帱c(diǎn)續(xù)傳功能，即使在上傳過(guò)程中遇到網(wǎng)絡(luò)問(wèn)題，也可以從斷點(diǎn)繼續(xù)。

var r = new Resumable({
  target: '/upload',  // 服務(wù)器端處理上傳請(qǐng)求的URL
  query: { upload_token: 'some_token' },
  testChunks: true,  // 測(cè)試每個(gè)分片是否有效
  chunkSize: 1 * 1024 * 1024  // 每個(gè)分片的大小，這里是 1MB
});

// 選擇文件上傳
r.assignBrowse(document.getElementById('file-upload-button'));

// 開(kāi)始上傳
r.on('fileAdded', function(file) {
  r.upload();
});

// 上傳成功
r.on('fileSuccess', function(file, message) {
  console.log('Upload complete', message);
});

// 上傳失敗
r.on('fileError', function(file, message) {
  console.log('Upload failed', message);
});

后端接收示例（node.js）

const fs = require('fs');
const path = require('path');

// 假設(shè)文件上傳路徑為 /upload
app.post('/upload', (req, res) => {
  const chunk = req.files.chunk;  // 上傳的切片
  const filename = req.query.filename;  // 文件名
  const chunkIndex = req.query.chunkIndex;  // 切片索引

  const tempDir = path.join(__dirname, 'uploads', filename);
  fs.appendFileSync(tempDir, chunk.data);  // 將切片合并

  res.send('Chunk uploaded successfully');
});

2.fine-uploader.js

var uploader = new qq.FineUploader({
    element: document.getElementById('upload-container'),
    request: {
        endpoint: '/upload'
    },
    chunking: {
        enabled: true,
        partSize: 5 * 1024 * 1024  // 每個(gè)分片的大小為 5MB
    },
    callbacks: {
        onComplete: function(id, name, response) {
            console.log("Upload complete:", name);
        },
        onError: function(id, name, errorReason) {
            console.log("Error uploading file:", name);
        }
    }
});

3.tus-node-server

var upload = new tus.Upload(file, {
  endpoint: "http://localhost:1080/files/",
  retryDelays: [0, 3000, 5000, 10000],
  chunkSize: 5 * 1024 * 1024, // 5MB
});

upload.start();