Användbar Base64-kod börjar med att bestämma vad ingången faktiskt är. En JavaScript-sträng behöver en teckenkodning; en fil har redan bytes; ett JSON värde måste serialiseras först. Att hålla dessa steg synliga gör felsökningen lättare och förhindrar oavsiktlig dubbelkodning.
Koda ett litet JSON värde
Serialisera värdet exakt en gång, koda den strängen som UTF-8 och koda sedan byten som Base64. Det här exemplet innehåller ett icke-ASCII-fält för att fånga implementeringar som bara fungerar med engelska. Den är avsedd för små nyttolaster; den tillfälliga bytesträngen ökar minnesanvändningen.
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); // 你好En framgångsrik Base64 avkodning garanterar inte giltig JSON. Behandla UTF-8 avkodningen och JSON.parse som separata felpunkter. När det avkodade innehållet redan är en sträng som innehåller JSON, kommer serialisering av det igen att lägga till citattecken och escapes; som ändrar nyttolasten.
Läs en vald fil som byte
För en webbläsare File, använda arrayBuffer() när du behöver de underliggande byten. Använd inte file.text() för en bild, ett arkiv eller en krypterad fil: ogiltiga teckensekvenser kan bli ersättningstecken. Om din destination behöver en Data URI, FileReader.readAsDataURL() tillhandahåller omslaget såväl som Base64 data.
// 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.Rundturskontroller som fångar upp riktiga misstag
Jämför avkodade byte med den ursprungliga byte-arrayen. Att jämföra skärmdumpar eller filnamn kan inte upptäcka en ändrad byte. Inkludera tom inmatning, alla bytevärden från 0 till 255, kinesisk text, emoji och en nyttolast vars längd lämnar en eller två byte i den sista gruppen. För en grupp filer, bevara varje fils namn, storlek och resultat oberoende så att ett fel inte kan skriva över en annan framgångsrik utdata.
Håll konverteringarna lokala såvida inte ditt arbetsflöde avsiktligt anropar en API. En nätverksbegäran som innehåller den kodade utgången skickar fortfarande de underliggande data i reversibel form. För bytesträngbeteende och Unicode-begränsning för webbläsarfunktionen, se MDN: btoa().