前端文件上传实战：优化体验与性能

这些问题会导致服务器负载过高、用户体验割裂以及安全隐患。

实现方案

基础文件上传

在发送请求前，务必进行严格的客户端校验。

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

  // 验证文件大小
  if (file.size > 10 * 1024 * 1024) {
    alert('File too large');
    return;
  }

  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) {
    alert('Invalid file type');
    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('File uploaded successfully');
  })
  .catch(error => {
    console.error('Upload error:', error);
    alert('Upload failed: ' + error.message);
  });
}

// 多文件上传逻辑类似，注意 append 时使用相同 key 或数组形式
function uploadFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;
  if (files.length === 0) {
    alert('Please select files');
    return;
  }

  for (const file of files) {
    if (file.size > 10 * 1024 * 1024) {
      alert(`File ${file.name} is too large`);
      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('Files uploaded successfully'))
    .catch(error => alert('Upload failed: ' + error.message));
}

带进度显示的文件上传

fetch API 原生并不支持上传进度监听。若需精确控制进度条，推荐使用 XMLHttpRequest。

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

  if (!file) {
    alert('Please select a 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('File uploaded successfully');
    } else {
      alert('Upload failed: ' + xhr.statusText);
    }
  });

  xhr.addEventListener('error', function() {
    alert('Upload failed');
  });

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

拖拽上传

利用 HTML5 Drag and Drop API 可以提升交互体验。

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

  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() {
    document.getElementById('fileInput').click();
  });
}

大文件分块上传

对于超大文件，分块上传是必备方案。它允许断点续传并减轻单次请求压力。

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);
}

最佳实践

除了基础上传，以下技巧能显著提升质量：

// 1. 图片预览
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);
}

// 2. 压缩图片（减少带宽）
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);
  });
}

// 3. 安全验证
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 file type' };
  const extension = file.name.substring(file.name.lastIndexOf('.'));
  const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
  if (!allowedExtensions.includes(extension.toLowerCase())) return { valid: false, message: 'Invalid extension' };
  return { valid: true, message: 'File is valid' };
}

// 4. 上传状态管理
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 配合基础校验可能更合适。

过度依赖库可能导致项目臃肿，建议先评估实际需求。如果实现导致体验下降，那方案本身就是失败的。记住，简洁有效的方案往往优于复杂的全能方案。