如何使用JavaScript提升浏览器到服务器的大文件/多图片上传性能

Hey there, let’s dive into the most practical, production-proven JavaScript techniques to boost large/multiple file/image upload performance from browser to server. These solutions address both speed and reliability, which are critical when dealing with big files:

Splitting large files into smaller chunks (like 5-10MB each) is a game-changer. Instead of uploading one massive file that can fail entirely if the connection drops, you upload chunks independently. If a chunk fails, you only retry that piece—not the whole file. It also plays nicer with server limits and network throttling.

Here’s a simplified implementation:

async function uploadFileInChunks(file, chunkSize = 10 * 1024 * 1024) { // 10MB chunks
  const totalChunks = Math.ceil(file.size / chunkSize);
  const fileId = crypto.randomUUID(); // Unique ID to track the file server-side

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

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

    try {
      await fetch('/upload-chunk', {
        method: 'POST',
        body: formData
      });
      console.log(`Chunk ${chunkIndex + 1}/${totalChunks} uploaded successfully`);
    } catch (error) {
      console.error(`Chunk ${chunkIndex + 1} failed, retrying...`);
      chunkIndex--; // Retry the failed chunk
      await new Promise(resolve => setTimeout(resolve, 1500)); // Add a small delay before retry
    }
  }

  // Notify server to merge all chunks into the final file
  await fetch('/merge-chunks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fileId, fileName: file.name })
  });
  console.log('File fully uploaded and merged!');
}

Uploading multiple files at once speeds things up, but you don’t want to flood the browser or server with too many concurrent requests. Controlling concurrency (e.g., 3-5 simultaneous uploads) balances speed and stability.

Example with concurrency limits:

async function uploadFilesWithConcurrency(files, maxConcurrency = 3) {
  const results = [];
  let activeUploads = 0;
  let currentFileIndex = 0;

  async function processNextFile() {
    if (currentFileIndex >= files.length) return;
    const file = files[currentFileIndex++];
    activeUploads++;

    try {
      // Replace with your upload logic (can be chunked or direct)
      const response = await fetch('/upload', {
        method: 'POST',
        body: new FormData().append('file', file)
      });
      results.push({ file, success: true, data: await response.json() });
    } catch (error) {
      results.push({ file, success: false, error: error.message });
      // Optional: Add retry logic here for failed files
    } finally {
      activeUploads--;
      await processNextFile();
    }
  }

  // Start the initial batch of uploads
  const initialBatch = Array(Math.min(maxConcurrency, files.length)).fill().map(processNextFile);
  await Promise.all(initialBatch);
  return results;
}

For image files, reducing their size before upload cuts down transfer time drastically. Use the Canvas API to resize images to your app’s required dimensions and lower quality (without noticeable visual loss):

async function optimizeImage(file, maxWidth = 1920, quality = 0.8) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);

    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      // Resize if image exceeds max width
      if (width > maxWidth) {
        height = (maxWidth / width) * height;
        width = maxWidth;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);

      // Convert canvas to optimized blob
      canvas.toBlob(
        (blob) => {
          if (!blob) return reject(new Error('Failed to optimize image'));
          const optimizedFile = new File([blob], file.name, { type: file.type });
          resolve(optimizedFile);
        },
        file.type,
        quality
      );
      URL.revokeObjectURL(img.src);
    };

    img.onerror = (err) => {
      URL.revokeObjectURL(img.src);
      reject(err);
    };
  });
}

// Usage with file input
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const optimizedFiles = await Promise.all(files.map(file => {
    if (file.type.startsWith('image/')) {
      return optimizeImage(file);
    }
    return file; // Skip non-image files
  }));
  // Now upload the optimized files
});

For extremely large files, avoid loading the entire file into browser memory. Use the Streams API with Fetch to send data in chunks as you read it, reducing memory pressure:

async function streamFileUpload(file) {
  const fileStream = file.stream();
  const response = await fetch('/upload-stream', {
    method: 'POST',
    body: fileStream,
    headers: {
      'Content-Type': file.type,
      'File-Name': encodeURIComponent(file.name)
    }
  });
  return response.json();
}

Improve user experience with real-time progress updates, and handle network flakiness with automatic retries (use exponential backoff to avoid overwhelming the server):

function uploadWithProgress(file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const progress = Math.round((e.loaded / e.total) * 100);
        onProgress(progress);
      }
    });

    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`Upload failed with status ${xhr.status}`));
      }
    });

    xhr.addEventListener('error', () => reject(new Error('Network error during upload')));
    xhr.open('POST', '/upload');
    xhr.send(formData);
  });
}

// Usage with retry
async function uploadWithRetry(file, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      await uploadWithProgress(file, (progress) => console.log(`Progress: ${progress}%`));
      return;
    } catch (error) {
      retries++;
      console.error(`Upload failed, retry ${retries}/${maxRetries}...`);
      await new Promise(resolve => setTimeout(resolve, 2 ** retries * 1000)); // Exponential backoff
    }
  }
  throw new Error('Upload failed after maximum retries');
}

A quick note: All these client-side techniques require server-side support. Your backend needs to handle chunked uploads, merge chunks, track concurrent requests, and validate file integrity.

内容的提问来源于stack exchange，提问作者Kiran Ghatage