Nuttige Base64-code begint met het bepalen wat de invoer eigenlijk is. Een JavaScript-reeks heeft een tekencodering nodig; een bestand heeft al bytes; een JSON-waarde heeft eerst serialisatie nodig. Door deze stappen zichtbaar te houden, wordt het debuggen eenvoudiger en wordt onbedoelde dubbele codering voorkomen.
Codeer een kleine JSON-waarde
Serialiseer de waarde precies één keer, codeer die tekenreeks als UTF-8 en codeer vervolgens de bytes als Base64. Dit voorbeeld bevat een niet-ASCII veld om implementaties op te vangen die alleen met Engels werken. Het is bedoeld voor kleine ladingen; de tijdelijke bytereeks verhoogt het geheugengebruik.
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); // 你好Een succesvolle Base64-decodering garandeert geen geldige JSON. Behandel de UTF-8 decodeer en JSON.parse als afzonderlijke faalpunten. Wanneer de gedecodeerde inhoud al een string is die JSON bevat, worden bij het opnieuw serialiseren ervan aanhalingstekens en escapes toegevoegd; waardoor de lading verandert.
Lees een geselecteerd bestand als bytes
Voor een browser File, gebruik arrayBuffer() wanneer u de onderliggende bytes nodig heeft. Niet gebruiken file.text() voor een afbeelding, archief of gecodeerd bestand: ongeldige tekenreeksen kunnen vervangende tekens worden. Als uw bestemming een gegevens URI nodig heeft, FileReader.readAsDataURL() levert zowel de wrapper als de Base64-gegevens.
// 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.Retourcontroles die echte fouten opsporen
Vergelijk gedecodeerde bytes met de originele byte-array. Het vergelijken van schermafbeeldingen of bestandsnamen kan een gewijzigde byte niet detecteren. Voeg lege invoer toe, alle bytewaarden van 0 tot 255, Chinese tekst, emoji en een payload waarvan de lengte één of twee bytes in de laatste groep overlaat. Bewaar voor een batch bestanden de naam, de grootte en het resultaat van elk bestand afzonderlijk, zodat één fout een andere succesvolle uitvoer niet kan overschrijven.
Houd conversies lokaal, tenzij uw workflow opzettelijk een API aanroept. Een netwerkverzoek dat de gecodeerde uitvoer bevat, verzendt nog steeds de onderliggende gegevens in omkeerbare vorm. Voor het byte-stringgedrag en de Unicode-beperking van de browserfunctie, zie MDN: btoa().