JavaScript で BLOB を Base64 文字列に変換するにはどうすればよいですか?

FileReader を使用して Blob を Base64 に変換する

JavaScript では、通常、画像またはファイルを表す Blob オブジェクトを変換する必要がある状況に遭遇することがあります。 Base64文字列に変換します。この変換は、HTTP 経由で送信したり、データベースに保存したりするなど、バイナリ データをテキスト形式で保存または送信する必要がある場合に必要です。

Blob および FileReader API を使用して提供したコード スニペット、この変換を実行することを目的としています。ただし、ソース変数が null を返すという問題について言及されました。

Base64 への Blob に FileReader を使用する

この問題の解決策は、FileReader を正しく使用するようにコードを変更することです。更新されたコードは次のとおりです。

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  var base64data = reader.result;                
  console.log(base64data);
}

このコードでは、readAsDataURL() メソッドを使用して BLOB データを Base64 文字列としてエンコードします。次に、onloadend イベント ハンドラーを使用して、reader.result プロパティから Base64 でエンコードされたデータを取得します。

jQuery を使用した簡単な方法

あるいは、より簡潔な実装のために jQuery の使用を検討することもできます。

$.ajax({
  url: "upload.php", // URL to submit the form
  type: "POST",
  data: {
    image: blob
  },
  beforeSend: function(xhr) {
    // Encode the blob as a base64 string
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      // Append the encoded data to the form data
      var data = reader.result;
      xhr.setRequestHeader("Image-Data", data);
    }
  }
});

jQuery Ajax メソッドがエンコードされた Base64 文字列の送信を処理することに注意してください。

データ URL 宣言の削除

Blob の結果には、Base64 の前にデータ URL 宣言が含まれることに注意することが重要です。エンコードされたデータ。 Base64 でエンコードされた文字列のみを取得するには、次のコードを使用できます:

var base64String = base64data.substring(base64data.indexOf(',') + 1);

以上がJavaScript で BLOB を Base64 文字列に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。