有用な Base64 コードは、実際の入力が何であるかを判断することから始まります。 JavaScript 文字列には文字エンコーディングが必要です。ファイルにはすでにバイトがあります。 JSON 値は最初にシリアル化する必要があります。これらの手順を表示しておくと、デバッグが容易になり、偶発的な二重エンコードを防ぐことができます。
小さい JSON 値をエンコードする
値を 1 回だけシリアル化し、その文字列を UTF-8 としてエンコードしてから、バイトを Base64 としてエンコードします。この例には、英語でのみ機能する実装をキャッチするための非 ASCII フィールドが含まれています。これは小さなペイロードを対象としています。一時的なバイト文字列によりメモリ使用量が増加します。
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); // 你好Base64 のデコードが成功しても、有効な JSON が保証されるわけではありません。 UTF-8 デコードを処理し、 JSON.parse 個別の障害点として。デコードされたコンテンツがすでに JSON を含む文字列である場合、それを再度シリアル化すると引用符とエスケープが追加されます。それによってペイロードが変わります。
選択したファイルをバイトとして読み取ります
ブラウザの場合 File、使用します arrayBuffer() 基礎となるバイトが必要な場合。使用しないでください file.text() 画像、アーカイブ、または暗号化ファイルの場合: 無効な文字シーケンスが置換文字になる可能性があります。宛先にデータ URI が必要な場合、 FileReader.readAsDataURL() ラッパーと 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.本当の間違いを発見する往復チェック
デコードされたバイトを元のバイト配列と比較します。スクリーンショットやファイル名を比較しても、変更されたバイトを検出できません。空の入力、0 ～ 255 のすべてのバイト値、中国語のテキスト、絵文字、および最後のグループに 1 バイトまたは 2 バイトを残すペイロードを含めます。ファイルのバッチの場合は、各ファイルの名前、サイズ、結果を個別に保存して、1 つのエラーが別の正常な出力を上書きしないようにします。
ワークフローが意図的に API を呼び出さない限り、変換をローカルに保ちます。エンコードされた出力を含むネットワーク リクエストは、基になるデータを可逆形式で送信します。ブラウザ機能のバイト文字列の動作と Unicode の制限については、を参照してください。 MDN: btoa()。