前端文件上传处理：优化体验与性能实践

在发送请求前，务必进行文件大小和类型的预校验，避免无效传输。

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  if (!file) return;

  // 校验文件大小 (例如 10MB)
  if (file.size > 10 * 1024 * 1024) {
    alert('文件过大，请上传小于 10MB 的文件');
    return;
  }

  // 校验文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件格式');
    return;
  }

  const formData = new FormData();
  formData.append('file', file);

  fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (!response.ok) throw new Error('Upload failed');
    return response.json();
  })
  .then(data => {
    console.log('Upload successful:', data);
    alert('上传成功');
  })
  .catch(error => {
    console.error('Upload error:', error);
    alert('上传失败：' + error.message);
  });
}

多文件上传处理

支持批量选择时，需遍历校验每个文件，并正确构建 FormData。

function uploadFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;
  
  if (files.length === 0) {
    alert('请选择文件');
    return;
  }

  for (const file of files) {
    if (file.size > 10 * 1024 * 1024) {
      alert(`文件 ${file.name} 过大`);
      return;
    }
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!allowedTypes.includes(file.type)) {
      alert(`文件 ${file.name} 类型无效`);
      return;
    }
  }

  const formData = new FormData();
  for (const file of files) {
    formData.append('files', file);
  }

  fetch('/api/upload-multiple', { method: 'POST', body: formData })
    .then(response => {
      if (!response.ok) throw new Error('Upload failed');
      return response.json();
    })
    .then(data => alert('文件上传成功'))
    .catch(error => alert('上传失败：' + error.message));
}

带进度显示的上传

原生 fetch API 并不直接支持上传进度监听，通常需要使用 XMLHttpRequest 来实现。

function uploadFileWithProgressXHR() {
  const fileInput = document.getElementById('fileInput');
  const progressBar = document.getElementById('progressBar');
  const file = fileInput.files[0];
  
  if (!file) return;

  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  
  xhr.upload.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      const percentCompleted = Math.round((event.loaded * 100) / event.total);
      progressBar.style.width = percentCompleted + '%';
      progressBar.textContent = percentCompleted + '%';
    }
  });

  xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log('Upload successful:', data);
      alert('上传成功');
    } else {
      alert('上传失败：' + xhr.statusText);
    }
  });

  xhr.addEventListener('error', function() {
    alert('网络错误');
  });

  xhr.open('POST', '/api/upload');
  xhr.send(formData);
}

拖拽上传交互

通过监听 dragover, dragleave 和 drop 事件，可以显著提升操作便捷性。

function setupDragAndDrop() {
  const dropArea = document.getElementById('dropArea');
  const fileInput = document.getElementById('fileInput');

  dropArea.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropArea.classList.add('drag-over');
  });

  dropArea.addEventListener('dragleave', function() {
    dropArea.classList.remove('drag-over');
  });

  dropArea.addEventListener('drop', function(event) {
    event.preventDefault();
    dropArea.classList.remove('drag-over');
    const files = event.dataTransfer.files;
    if (files.length > 0) {
      uploadFiles(files); // 复用上传逻辑
    }
  });

  // 点击触发选择
  dropArea.addEventListener('click', function() {
    fileInput.click();
  });

  fileInput.addEventListener('change', function() {
    if (this.files.length > 0) {
      uploadFiles(this.files);
    }
  });
}

大文件分块上传

对于超大文件，切片上传不仅能提高成功率，还能支持断点续传。

async function uploadLargeFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  const totalChunks = Math.ceil(file.size / chunkSize);
  const fileId = generateFileId();

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('fileId', fileId);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);

    try {
      const response = await fetch('/api/upload-chunk', {
        method: 'POST',
        body: formData
      });
      if (!response.ok) throw new Error('Chunk upload failed');
      console.log(`Chunk ${i + 1}/${totalChunks} uploaded`);
    } catch (error) {
      console.error('Upload error:', error);
      throw error;
    }
  }

  // 通知服务器合并分片
  const mergeResponse = await fetch('/api/merge-chunks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fileId, fileName: file.name, totalChunks })
  });

  if (!mergeResponse.ok) throw new Error('Merge failed');
  return mergeResponse.json();
}

function generateFileId() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

最佳实践建议

图片预览与压缩

使用 FileReader 实现本地预览，利用 Canvas 在上传前压缩图片，减少流量消耗。

// 图片预览
function previewImage(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    img.style.maxWidth = '200px';
    document.getElementById('preview').appendChild(img);
  };
  reader.readAsDataURL(file);
}

// 图片压缩
function compressImage(file, maxWidth = 800, maxHeight = 800, quality = 0.8) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    img.onload = function() {
      let width = img.width;
      let height = img.height;
      
      if (width > height) {
        if (width > maxWidth) {
          height = (height * maxWidth) / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width = (width * maxHeight) / height;
          height = maxHeight;
        }
      }
      
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      
      canvas.toBlob(function(blob) {
        resolve(blob);
      }, file.type, quality);
    };
    img.src = URL.createObjectURL(file);
  });
}

安全验证与状态管理

除了 MIME 类型，还应校验文件扩展名。同时，建立统一的状态管理类来追踪多个上传任务。

function validateFile(file) {
  if (file.size > 10 * 1024 * 1024) return { valid: false, message: 'File too large' };
  
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];
  if (!allowedTypes.includes(file.type)) return { valid: false, message: 'Invalid type' };
  
  const extension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
  const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
  if (!allowedExtensions.includes(extension)) return { valid: false, message: 'Invalid extension' };
  
  return { valid: true, message: 'Valid' };
}

class UploadManager {
  constructor() {
    this.uploads = new Map();
  }
  async upload(file) {
    const id = generateFileId();
    const upload = { id, file, status: 'pending', progress: 0, error: null };
    this.uploads.set(id, upload);
    try {
      upload.status = 'uploading';
      // 执行上传逻辑...
      upload.status = 'completed';
      upload.progress = 100;
    } catch (error) {
      upload.status = 'failed';
      upload.error = error.message;
    }
    return upload;
  }
  cancelUpload(id) {
    const upload = this.uploads.get(id);
    if (upload) upload.status = 'cancelled';
  }
}

总结与建议

文件上传的核心目的是服务用户，而非炫技。虽然分块上传和压缩技术很强大，但应根据实际需求权衡复杂度。对于普通场景，简单的 FormData 配合基础校验已足够；对于大文件或高并发场景，再引入分片和状态管理。始终确保代码的可维护性和用户的流畅体验，才是工程化的关键。