Przydatny kod Base64 zaczyna się od podjęcia decyzji, jakie właściwie są dane wejściowe. Ciąg JavaScript wymaga kodowania znaków; plik ma już bajty; wartość JSON wymaga najpierw serializacji. Utrzymanie widoczności tych kroków ułatwia debugowanie i zapobiega przypadkowemu podwójnemu kodowaniu.
Zakoduj małą wartość JSON
Serializuj wartość dokładnie raz, zakoduj ten ciąg jako UTF-8, a następnie zakoduj bajty jako Base64. Ten przykład zawiera pole inne niż ASCII do przechwytywania implementacji, które działają tylko w języku angielskim. Jest przeznaczony do małych ładunków; tymczasowy ciąg bajtów zwiększa użycie pamięci.
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); // 你好Pomyślne dekodowanie Base64 nie gwarantuje poprawności JSON. Traktuj dekodowanie UTF-8 i JSON.parse jako oddzielne punkty awarii. Gdy zdekodowana treść jest już ciągiem zawierającym JSON, ponowna serializacja dodaje cudzysłowy i znaki ucieczki; co zmienia ładunek.
Odczytaj wybrany plik jako bajty
Dla przeglądarki File, użyj arrayBuffer() kiedy potrzebujesz podstawowych bajtów. Nie używać file.text() w przypadku obrazu, archiwum lub zaszyfrowanego pliku: nieprawidłowe sekwencje znaków mogą stać się znakami zastępczymi. Jeśli miejsce docelowe potrzebuje danych URI, FileReader.readAsDataURL() udostępnia opakowanie oraz dane 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.Kontrole w obie strony, które wychwytują prawdziwe błędy
Porównaj zdekodowane bajty z oryginalną tablicą bajtów. Porównywanie zrzutów ekranu lub nazw plików nie umożliwia wykrycia zmienionego bajtu. Uwzględnij puste dane wejściowe, wszystkie wartości bajtów od 0 do 255, tekst w języku chińskim, emoji i ładunek, którego długość pozostawia jeden lub dwa bajty w ostatniej grupie. W przypadku partii plików zachowaj nazwę, rozmiar i wynik każdego pliku niezależnie, aby jeden błąd nie mógł zastąpić innego pomyślnego wyniku.
Zachowaj konwersje lokalne, chyba że Twój przepływ pracy celowo wywołuje API. Żądanie sieciowe zawierające zakodowane dane wyjściowe nadal wysyła podstawowe dane w formie odwracalnej. Aby zapoznać się z zachowaniem ciągu bajtów i ograniczeniami Unicode funkcji przeglądarki, zobacz MDN: btoa().