JS利用Worker多线程大文件切片上传

// 主线程代码，负责文件切片并发送到Worker
const worker = new Worker('worker.js'); // 假设有一个worker.js文件
 
// 假设有一个input元素用于文件上传
const input = document.getElementById('fileInput');
input.addEventListener('change', function() {
  const file = this.files[0];
  const chunkSize = 1024 * 1024; // 每个分片的大小为1MB
  let offset = 0; // 当前分片的起始位置
 
  // 读取并发送文件分片到Worker
  function readAndSendChunk() {
    const slice = file.slice(offset, offset + chunkSize + 1);
    offset += chunkSize;
 
    worker.postMessage({ slice: slice, offset: offset }, [slice]); // 使用Transferable对象
 
    if (offset < file.size) {
      // 递归读取下一个分片
      readAndSendChunk();
    } else {
      console.log('所有分片已发送完成');
    }
  }
 
  readAndSendChunk(); // 开始读取并发送分片
});

// worker.js 文件的一个简单示例

// Worker线程代码，负责处理文件分片上传的具体逻辑
onmessage = function(e) {
  const slice = e.data.slice;
  const offset = e.data.offset;
  
  // 这里可以添加上传文件分片的逻辑，例如使用XMLHttpRequest或者fetch上传
  // 上传完成后，可以通过postMessage向主线程发送消息或者处理结果
  
  console.log('正在上传分片，位置：', offset);
  
  // 假设的上传逻辑，实际应用中需要替换为真实的上传代码
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', slice, `filename_${offset}.part`);
  xhr.open('POST', 'upload_endpoint', true);
  xhr.send(formData);
  
  // 上传完成后，可以通知主线程
  postMessage({ uploaded: offset });
};

以上代码示例展示了如何使用Web Worker来进行大文件的分片上传。主线程负责分片并发送工作给Worker，Worker负责实际处理分片的上传逻辑。这样可以避免阻塞主线程，提升应用的响应性。