JavaScript Base64 opskrifter til JSON, filer og byte-arrays

Brug UTF-8-sikre JavaScript opskrifter til JSON nyttelast og udvalgte filer uden ved et uheld at behandle binære data som tekst.

Nyttig Base64 kode starter med at bestemme, hvad input faktisk er. En JavaScript streng kræver en tegnkodning; en fil har allerede bytes; en JSON værdi skal først serialiseres. At holde disse trin synlige gør fejlfinding lettere og forhindrer utilsigtet dobbeltkodning.

Indkode en lille JSON værdi

Serialiser værdien nøjagtigt én gang, indkod den streng som UTF-8, og indkod derefter bytes som Base64. Dette eksempel inkluderer et ikke-ASCII felt for at fange implementeringer, der kun fungerer med engelsk. Den er beregnet til små nyttelaster; den midlertidige byte-streng øger hukommelsesforbruget.

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 vellykket Base64 afkodning garanterer ikke gyldig JSON. Behandl UTF-8 afkodningen og JSON.parse som separate fejlpunkter. Når det afkodede indhold allerede er en streng, der indeholder JSON, vil serialisering af det igen tilføje anførselstegn og escapes; som ændrer nyttelasten.

Læs en valgt fil som bytes

Til en browser File, brug arrayBuffer() når du har brug for de underliggende bytes. Må ikke bruges file.text() for et billede, et arkiv eller en krypteret fil: ugyldige tegnsekvenser kan blive erstatningstegn. Hvis din destination har brug for en Data URI, FileReader.readAsDataURL() leverer indpakningen såvel som Base64 dataene.

// 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.

Rundrejsetjek, der fanger rigtige fejl

Sammenlign afkodede bytes med det originale byte-array. Sammenligning af skærmbilleder eller filnavne kan ikke registrere en ændret byte. Inkluder tom input, alle byteværdier fra 0 til 255, kinesisk tekst, emoji og en nyttelast, hvis længde efterlader en eller to bytes i den sidste gruppe. For en batch af filer skal du bevare hver fils navn, størrelse og resultat uafhængigt, så en fejl ikke kan overskrive et andet vellykket output.

Hold konverteringer lokale, medmindre din arbejdsgang med vilje kalder en API. En netværksanmodning, der indeholder det kodede output, sender stadig de underliggende data i reversibel form. For byte-strengadfærd og Unicode-begrænsning af browserfunktionen, se MDN: btoa().