El código útil Base64 comienza decidiendo cuál es realmente la entrada. Una cadena JavaScript necesita una codificación de caracteres; un archivo ya tiene bytes; un valor JSON necesita serialización primero. Mantener esos pasos visibles facilita la depuración y evita la doble codificación accidental.
Codifique un pequeño valor JSON
Serialice el valor exactamente una vez, codifique esa cadena como UTF-8, luego codifique los bytes como Base64. Este ejemplo incluye un campo que no es ASCII para detectar implementaciones que funcionan solo con inglés. Está destinado a cargas útiles pequeñas; la cadena de bytes temporal aumenta el uso de memoria.
const value = { message: '你好', count: 3 };
const text = JSON.stringify(value);
let binary = '';
for (const byte of new TextEncoder().encode(text)) {
binary += String.fromCharCode(byte);
}
const encoded = btoa(binary);
const bytes = Uint8Array.from(atob(encoded), c => c.charCodeAt(0));
const json = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
console.log(JSON.parse(json).message); // 你好Una decodificación exitosa de Base64 no garantiza la validez de JSON. Trate la decodificación UTF-8 y JSON.parse como puntos de falla separados. Cuando el contenido decodificado ya es una cadena que contiene JSON, serializarlo nuevamente agrega comillas y escapes; eso cambia la carga útil.
Leer un archivo seleccionado como bytes
Para un navegador File, uso arrayBuffer() cuando necesita los bytes subyacentes. no usar file.text() para una imagen, archivo o archivo cifrado: las secuencias de caracteres no válidas pueden convertirse en caracteres de reemplazo. Si su destino necesita un Datos URI, FileReader.readAsDataURL() proporciona el contenedor así como los datos Base64.
// file is a File selected by the user.
const bytes = new Uint8Array(await file.arrayBuffer());
console.log(bytes.byteLength); // original file size in bytes
// Pass bytes to a byte-oriented encoder, not TextEncoder.Controles de ida y vuelta que detectan errores reales
Compare los bytes decodificados con la matriz de bytes original. La comparación de capturas de pantalla o nombres de archivos no puede detectar un byte modificado. Incluya entradas vacías, todos los valores de bytes de 0 a 255, texto chino, emoji y una carga útil cuya longitud deje uno o dos bytes en el grupo final. Para un lote de archivos, conserve el nombre, el tamaño y el resultado de cada archivo de forma independiente para que un error no pueda sobrescribir otro resultado exitoso.
Mantenga las conversiones locales a menos que su flujo de trabajo llame intencionalmente a API. Una solicitud de red que contiene la salida codificada aún envía los datos subyacentes en forma reversible. Para conocer el comportamiento de la cadena de bytes y la limitación Unicode de la función del navegador, consulte MDN: btoa().