JavaScriptのBase 64文字列への変換

Webブラウザは、Web開発者がデータを管理、操作、およびデータを格納するために使用するさまざまなデータプリミティブを提供します-プレーンテキストから、ファイル、画像、ビデオなど.しかし、それらを正しく使用して効果的に混乱することができます.そのような例の1つは、JavaScriptを使用してBase 64文字列をBLOBに変換することです.エーblob 画像やビデオなどのファイルの形式でバイナリデータを表します.あなたがサーバーにアップロードされる必要があるストリング形式でイメージを持っていると仮定してください.しかし、利用可能なAPIはBLOB形式だけでイメージを受け入れます.何をしますか.
様々な解決策に従ってaround the Internet , 変換は複雑であるように見えます.バイト配列の操作?いいえ.幸いにも、簡単に、現代的なアプローチ利用可能なおかげでFetch API . それはあなたのバックエンドAPIにHTTPリクエストを作るように一般的にネットワーク全体のリソースを取得するために使用されるすべてのWebブラウザに組み込まれている強力な機能です.Fetch aを返すResponse object . それが判明すると、それだけでJSON以上のデータに変換することができます、また、配列バッファ、フォームデータ、およびblobsを返すことができます.この場合、我々はblobsを使用します.

ワン、ツー
まず、base 64 stringをfetch :

const base64Data = "aGV5IHRoZXJl";
const base64 = await fetch(base64Data);

base 64文字列の形式によっては、content typeデータを追加する必要があります.たとえば、JPEGイメージ

const base64Response = await fetch(`data:image/jpeg;base64,${base64Data}`);

次に、レスポンスをBLOBに変換します.

const blob = await base64Response.blob();

それだ!ここから、サーバーにアップロードすることができます画面上に表示し、より.

Blobをbase 64文字列に変換する
BlobからBase 64文字列への変換を反転する方法は?残念ながら、これは少し複雑です(あなたがより良いアプローチを知っているならば、コメントで知らせてください!
私はこの現実世界の例に遭遇しましたIonifits demo app . 一方、企業の経費を入力すると、ユーザーが経費領収書の写真を撮る.これを実現するためにCamera and Filesystem エイプ.
写真を撮った後、カメラAPIはBLOB URLを返します.

https://myapp.com/cc7622aa-271b-4ee3-b707-28cbc84bc37a

ファイルシステム(一時的にブラウザメモリに一時的に読み込まれるオブジェクト)に写真を保存するには、ファイルシステムAPIはデータをbase 64形式にする必要があるので、Blobをbase 64文字列に変換する必要があります.
このように様々なテクニックがありますが、非同期プログラミングのファンとして、FileReader API BLOBを変換するには、次の手順に従います.

convertBlobToBase64 = (blob) => new Promise((resolve, reject) => {
    const reader = new FileReader;
    reader.onerror = reject;
    reader.onload = () => {
        resolve(reader.result);
    };
    reader.readAsDataURL(blob);
});

const base64String = await convertBlobToBase64(blob);

ベール!現代のWeb開発技術を使用して、BlobとBase 64の文字列を前後に変換することは、結局とても怖いです.他のヒントやトリックは、最近あなたのウェブ開発の旅でピックアップしている?

Special thanks to Capacitor community member Matt Wyld for his feedback, especially performance testing the Fetch approach on mobile.