前端文件上传处理最佳实践与优化方案

问题：

• 简单文件上传，无法处理大文件
• 忽略文件大小限制，导致服务器负担过重
• 忽略文件类型限制，可能上传恶意文件
• 缺少进度显示，用户体验差
• 忽略错误处理，上传失败时用户不知道原因

正确的做法

基本文件上传

// 1. 单文件上传
function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  // 验证文件大小
  if (file.size > 10 * 1024 * 1024) { // 10MB
    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);
  });
}

// 2. 多文件上传
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) { // 10MB
      alert(`File ${file.name} is too large`);
      return;
    }
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!allowedTypes.includes(file.type)) {
      alert(`File ${file.name} has invalid type`);
      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 => {
    console.log('Upload successful:', data);
    alert('Files uploaded successfully');
  })
  .catch(error => {
    console.error('Upload error:', error);
    alert('Upload failed: ' + error.message);
  });
}

带进度显示的文件上传

function uploadFileWithProgress() {
  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);
  fetch('/api/upload', {
    method: 'POST',
    body: formData,
    // 添加进度监听
    onUploadProgress: function(progressEvent) {
      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      progressBar.style.width = percentCompleted + '%';
      progressBar.textContent = percentCompleted + '%';
    }
  })
  .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);
  });
}

// 使用 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 {
      console.error('Upload error:', xhr.statusText);
      alert('Upload failed: ' + xhr.statusText);
    }
  });
  xhr.addEventListener('error', function() {
    console.error('Upload error');
    alert('Upload failed');
  });
  xhr.open('POST', '/api/upload');
  xhr.send(formData);
}

拖拽上传

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();
  });
  // 文件选择
  document.getElementById('fileInput').addEventListener('change', function() {
    const files = this.files;
    if (files.length > 0) {
      uploadFiles(files);
    }
  });
}

function uploadFiles(files) {
  // 验证文件
  for (const file of files) {
    if (file.size > 10 * 1024 * 1024) { // 10MB
      alert(`File ${file.name} is too large`);
      return;
    }
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!allowedTypes.includes(file.type)) {
      alert(`File ${file.name} has invalid type`);
      return;
    }
  }
  // 上传逻辑
  const formData = new FormData();
  for (const file of files) {
    formData.append('files', file);
  }
  // 上传代码...
}

大文件分块上传

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('Upload failed');
      }
      const data = await response.json();
      console.log(`Chunk ${i + 1}/${totalChunks} uploaded:`, data);
    } catch (error) {
      console.error('Upload error:', error);
      throw error;
    }
  }
  // 通知服务器合并 chunks
  const response = await fetch('/api/merge-chunks', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ fileId, fileName: file.name, totalChunks })
  });
  if (!response.ok) {
    throw new Error('Merge failed');
  }
  const data = await response.json();
  console.log('File uploaded successfully:', data);
  return data;
}

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

最佳实践

// 1. 使用 FileReader 预览图片
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) { // 10MB
    return { valid: false, message: 'File too large' };
  }
  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
  if (!allowedTypes.includes(file.type)) {
    return { valid: false, message: 'Invalid file type' };
  }
  // 验证文件扩展名
  const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf', '.doc', '.docx'];
  const extension = file.name.substring(file.name.lastIndexOf('.'));
  if (!allowedExtensions.includes(extension.toLowerCase())) {
    return { valid: false, message: 'Invalid file 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;
  }
  getUpload(id) {
    return this.uploads.get(id);
  }
  getAllUploads() {
    return Array.from(this.uploads.values());
  }
  cancelUpload(id) {
    const upload = this.uploads.get(id);
    if (upload) {
      upload.status = 'cancelled';
      // 取消上传逻辑
      // ...
    }
  }
}

// 使用
const uploadManager = new UploadManager();
const file = document.getElementById('fileInput').files[0];
uploadManager.upload(file).then(upload => {
  console.log('Upload result:', upload);
});

毒舌点评

文件上传确实很重要，但我见过太多开发者滥用这个特性，导致应用变得过于复杂。

想象一下，当你为了实现大文件上传，使用了分块上传技术，结果导致代码变得非常复杂，这真的值得吗？

还有那些过度使用文件上传库的开发者，为了使用某个库，而忽略了项目的实际需求，结果导致代码变得过于复杂。

所以，在实现文件上传时，一定要根据实际需求来决定。不要为了实现所有功能而实现，要选择最适合的方案。

当然，对于需要上传大文件的应用来说，分块上传是必要的。但对于普通的文件上传需求，使用简单的 FormData 可能更加合适。

最后，记住一句话：文件上传的目的是为了方便用户上传文件，而不是为了炫技。如果你的文件上传实现导致用户体验变得更差，那你就失败了。