React中Base64编码遇DOMException无效字符错误及编码解码双向兼容问题求助

Hey there, let's sort out your Base64 encoding/decoding issues—you're just mixing up some API usage and missing a key step for proper UTF-8 support. Let's break this down step by step:

Why Your Previous Attempts Failed #

Let's start with why your existing code wasn't working:

• codeContent.toString("base64"): JavaScript's native String.toString() method doesn't accept a "base64" parameter—this is likely a mix-up with Node.js's Buffer API (which does support that syntax). In the browser, this approach doesn't actually encode your string to Base64, which explains the garbled text when decoding.
• atob(codeContent): You got the API backwards! atob() is for decoding Base64 strings back to plain text, not encoding. Feeding raw code into atob() tells the browser to treat your code as Base64 data, which it's not—hence the invalid character errors and empty backend responses.

The Correct Browser-Side Base64 Workflow #

Browsers have built-in tools for this, but you need to handle UTF-8 properly (since btoa()—the actual encoding function—only works with ASCII characters). Here's the reliable approach:

1. Encode UTF-8 Text to Base64 #

This function converts your code content to a UTF-8 binary representation first, then encodes it to Base64:

function utf8ToBase64(str) {
  // Convert UTF-8 string to a Uint8Array
  const encoder = new TextEncoder();
  const uint8Array = encoder.encode(str);
  // Convert Uint8Array to a binary string compatible with btoa()
  const binaryStr = String.fromCharCode(...uint8Array);
  // Encode to Base64
  return btoa(binaryStr);
}

2. Decode Base64 Back to UTF-8 Text #

To reverse the process (e.g., when fetching from your API), use this:

function base64ToUtf8(base64Str) {
  // Decode Base64 to binary string
  const binaryStr = atob(base64Str);
  // Convert binary string back to Uint8Array
  const uint8Array = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i);
  }
  // Decode Uint8Array to UTF-8 string
  const decoder = new TextDecoder();
  return decoder.decode(uint8Array);
}

3. Test with Your Example Code #

Let's verify this works with your test content:

const testCode = `let numberTest = 52; let arrayTest = [63, 24, 75]; let sumTest = numberTest + arrayTest[0];`;
const encoded = utf8ToBase64(testCode);
const decoded = base64ToUtf8(encoded);

console.log(decoded === testCode); // Logs true—perfect match!

Backend Tips to Ensure Reliability #

• When sending the Base64 string via POST, wrap it in a JSON payload (e.g., { "code": encodedBase64 }) to avoid any accidental mangling of special characters.
• On the backend, make sure you decode using UTF-8. For example, in Node.js:

  const decodedCode = Buffer.from(encodedBase64, 'base64').toString('utf8');
  

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