Hey there, let's figure out why your browser's crashing and work through practical fixes for handling those large files (70MB+) in your XML request workflow.

The Root Cause #

Your browser is crashing because loading entire large files into memory as strings (like converting to Base64 for XML) is extremely memory-intensive. A 70MB file becomes ~93MB when encoded to Base64, and wrapping that in XML tags adds even more overhead—this easily overwhelms the browser's JS engine memory limits, leading to crashes.

Practical Solutions #

1. Ditch XML for Chunked FormData Uploads (Best Approach)

XML is terrible for large binary content. Instead, split files into smaller chunks and use FormData to upload them incrementally. This keeps memory usage low since you only process one chunk at a time.

Here's a quick example of how to implement chunked uploads:

async function uploadLargeFile(file, chunkSize = 10 * 1024 * 1024) { // 10MB chunks
  const totalChunks = Math.ceil(file.size / chunkSize);
  
  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('chunk', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);
    // Add your other form values here too

    const response = await fetch('/api/upload-chunk', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error(`Chunk ${i} failed to upload`);
    }
  }

  // After all chunks are uploaded, tell the server to merge them
  await fetch('/api/merge-chunks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ fileName: file.name, totalChunks })
  });
}

Your backend will need logic to receive chunks, store them temporarily, and merge them once all chunks are uploaded.

2. Avoid Loading Entire Files into Memory

If you absolutely have to use XML (e.g., backend constraints), don't read the entire file into a string. Instead:

• Use FileReader to read chunks of the file incrementally (though this is trickier than FormData chunks).
• Send the XML and file as a multipart MIME request: Put your XML metadata in one part, and the raw file binary in another. This way, the XML itself stays small, and the file is streamed rather than loaded entirely into memory.

3. Optimize Existing Code (If You Must Stick with XML)

If XML is non-negotiable, try these tweaks:

• Skip Base64 encoding if your backend accepts raw binary in XML (unlikely, but worth checking). Base64 adds 33% overhead to file size.
• Use Blob instead of strings to hold file content when building the request. Some XML libraries can handle Blob content more efficiently than giant strings.
• Check for memory leaks: Use Chrome DevTools' Memory panel to see if your file reader functions are leaving unused objects in memory (e.g., not clearing references to large strings after upload attempts).

4. Validate Browser Limits

Different browsers have different memory limits for JS strings and Blobs. For example, Chrome typically handles up to ~512MB of memory per tab, but large strings can push this limit faster than binary data. Stick to binary chunking whenever possible to stay under these limits.

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