Le code Base64 utile commence par décider de la nature réelle de l'entrée. Une chaîne JavaScript nécessite un codage de caractères ; un fichier contient déjà des octets ; une valeur JSON doit d'abord être sérialisée. Garder ces étapes visibles facilite le débogage et évite le double encodage accidentel.
Encodez une petite valeur JSON
Sérialisez la valeur exactement une fois, codez cette chaîne comme UTF-8, puis codez les octets comme Base64. Cet exemple inclut un champ non-ASCII pour détecter les implémentations qui fonctionnent uniquement avec l'anglais. Il est destiné aux petites charges utiles ; la chaîne d'octets temporaire augmente l'utilisation de la mémoire.
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); // 你好Un décodage Base64 réussi ne garantit pas un JSON valide. Traitez le décodage UTF-8 et JSON.parse comme points de défaillance distincts. Lorsque le contenu décodé est déjà une chaîne contenant JSON, sa nouvelle sérialisation ajoute des guillemets et des échappements ; cela change la charge utile.
Lire un fichier sélectionné en octets
Pour un navigateur File, utiliser arrayBuffer() lorsque vous avez besoin des octets sous-jacents. Ne pas utiliser file.text() pour une image, une archive ou un fichier crypté : des séquences de caractères invalides peuvent devenir des caractères de remplacement. Si votre destination a besoin d'un Data URI, FileReader.readAsDataURL() fournit le wrapper ainsi que les données 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.Des contrôles aller-retour qui détectent les vraies erreurs
Comparez les octets décodés avec le tableau d'octets d'origine. La comparaison de captures d'écran ou de noms de fichiers ne peut pas détecter un octet modifié. Incluez une entrée vide, toutes les valeurs d'octets de 0 à 255, du texte chinois, des emoji et une charge utile dont la longueur laisse un ou deux octets dans le groupe final. Pour un lot de fichiers, conservez le nom, la taille et le résultat de chaque fichier indépendamment afin qu'une erreur ne puisse pas écraser une autre sortie réussie.
Conservez les conversions locales, sauf si votre flux de travail appelle intentionnellement un API. Une requête réseau contenant la sortie codée envoie toujours les données sous-jacentes sous une forme réversible. Pour le comportement des chaînes d'octets et les limitations Unicode de la fonction de navigateur, voir MDN : btoa().