前端文件上传处理：提升用户体验与性能优化

问题：

• 无法处理大文件
• 忽略大小限制导致服务器负担重
• 忽略类型限制存在安全风险
• 缺少进度显示
• 忽略错误处理

实现方案

基本文件上传

// 1. 单文件上传
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); });
}
// 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) { 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) { 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;
  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; }
  }
  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) 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 即可。根据实际需求选择方案，确保用户体验优先。