Nützlicher Base64-Code beginnt mit der Entscheidung, was die Eingabe tatsächlich ist. Eine JavaScript-Zeichenfolge benötigt eine Zeichenkodierung; eine Datei hat bereits Bytes; Ein JSON-Wert muss zuerst serialisiert werden. Wenn diese Schritte sichtbar bleiben, wird das Debuggen einfacher und eine versehentliche Doppelcodierung verhindert.
Codieren Sie einen kleinen JSON-Wert
Serialisieren Sie den Wert genau einmal, kodieren Sie diese Zeichenfolge als UTF-8 und kodieren Sie dann die Bytes als Base64. Dieses Beispiel enthält ein Nicht-ASCII-Feld, um Implementierungen abzufangen, die nur mit Englisch funktionieren. Es ist für kleine Nutzlasten gedacht; Die temporäre Bytefolge erhöht die Speichernutzung.
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); // 你好Eine erfolgreiche Base64-Dekodierung garantiert keine gültige JSON. Behandeln Sie die UTF-8-Dekodierung und JSON.parse als separate Fehlerpunkte. Wenn der dekodierte Inhalt bereits eine Zeichenfolge ist, die JSON enthält, werden bei der erneuten Serialisierung Anführungszeichen und Escapezeichen hinzugefügt. das verändert die Nutzlast.
Liest eine ausgewählte Datei als Bytes
Für einen Browser File, verwenden arrayBuffer() wenn Sie die zugrunde liegenden Bytes benötigen. Nicht verwenden file.text() für ein Bild, ein Archiv oder eine verschlüsselte Datei: Ungültige Zeichenfolgen können zu Ersatzzeichen werden. Wenn Ihr Ziel eine Datennummer URI benötigt, FileReader.readAsDataURL() stellt den Wrapper sowie die Base64-Daten bereit.
// 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.Roundtrip-Checks, die echte Fehler aufdecken
Vergleichen Sie decodierte Bytes mit dem ursprünglichen Byte-Array. Beim Vergleich von Screenshots oder Dateinamen kann kein geändertes Byte erkannt werden. Fügen Sie leere Eingaben, alle Bytewerte von 0 bis 255, chinesischen Text, Emojis und eine Nutzlast ein, deren Länge ein oder zwei Bytes in der letzten Gruppe übrig lässt. Behalten Sie für einen Dateistapel den Namen, die Größe und das Ergebnis jeder Datei unabhängig bei, damit ein Fehler nicht eine andere erfolgreiche Ausgabe überschreiben kann.
Behalten Sie die Konvertierungen lokal bei, es sei denn, Ihr Workflow ruft absichtlich API auf. Eine Netzwerkanforderung, die die codierte Ausgabe enthält, sendet die zugrunde liegenden Daten weiterhin in umkehrbarer Form. Informationen zum Byte-String-Verhalten und zur Unicode-Einschränkung der Browserfunktion finden Sie unter MDN: btoa().