input标签上传文件夹页面卡死应该怎么办？

Question

使用input标签上传文件时，当用户选择文件夹且文件夹中包含太多文件时，页面会卡死或者崩溃。
请问这种情况应该怎么优化？谢谢

<input
      ref="input"
      type="file"
      webkitdirectory
      multiple
      hidden
      @change="changeFile" />

Answer 1

可以限限制上传文件个数

const MAX_FILE_COUNT = 500;

function changeFile(event) {
  const files = event.target.files;
  if (files.length > MAX_FILE_COUNT) {
    alert(`请不要选择超过${MAX_FILE_COUNT}个文件`);
    // 可能需要清空文件选择，具体取决于浏览器兼容性
    event.target.value = '';
    return;
  }
  // ... 其他文件处理逻辑
}

还可以使用Web Workers

// main.js
const worker = new Worker('worker.js');

worker.postMessage({ action: 'validateFiles', files: event.target.files });

worker.onmessage = (event) => {
  if (event.data.action === 'validationResult') {
    console.log('Validation result:', event.data.result);
  }
};

// worker.js
self.addEventListener('message', (event) => {
  switch (event.data.action) {
    case 'validateFiles':
      const validFiles = event.data.files.filter(validateFile);
      self.postMessage({ action: 'validationResult', result: validFiles });
      break;
    // ...
  }
});

function validateFile(file) {
  // 文件验证逻辑...
}

还可以分批次上传

async function uploadFilesInBatches(files, batchSize = 100) {
  for (let i = 0; i < files.length; i += batchSize) {
    const batchFiles = files.slice(i, i + batchSize);
    const formData = new FormData();
    for (const file of batchFiles) {
      formData.append('files', file);
    }
    await fetch('/api/upload', { method: 'POST', body: formData });
  }
}

// 在changeFile事件处理器中调用
uploadFilesInBatches(event.target.files);

懒加载：
先上传文件的基本信息（如名称、大小、类型、路径等），待用户需要查看或进一步操作时再上传实际文件内容。

流式上传：
利用Blob、FileReader的readAsArrayBuffer或第三方库（如Resumable.js）不等待整个文件加载完成。

Answer 2

那就是东西太多,客户端性能不行,要不压缩成zip,让服务端进行解压处理

Answer 3

使用 Dropzone.js 试试