Javascript ファイルと Blob の詳細な説明

ファイル（）

File() コンストラクターは新しい File オブジェクト インスタンスを作成します。

文法

var myFile = new File(ビッ​​ト、名前[、オプション]);

パラメータ

ビット

ArrayBuffer 、 ArrayBufferView 、 Blob 、またはDOMStringオブジェクト、またはこれらの任意の組み合わせを含む配列。これは UTF-8 でエンコードされたファイルの内容です。

名前

USVString 、ファイル名またはファイル パスを示します。

オプション オプション

ファイルのオプションのプロパティを含むオプション オブジェクト。利用可能なオプションは次のとおりです。

• type : ファイルに配置されるコンテンツの MIME タイプを表す DOMString。デフォルト値は "" です。
• lastModified : ファイルが最後に変更されたときの Unix タイムスタンプ (ミリ秒単位) を表す数値。デフォルト値は Date.now() です。

例

var file = new File(["私の名前"], "infoTxt", {
  タイプ: "text/plain",
});

ブロブ()

Blob オブジェクトは、不変の生のファイルのようなオブジェクトを表します。データはテキストまたはバイナリ形式で読み取ることができ、データ操作のために ReadableStream に変換することもできます。

Blob は必ずしも JavaScript のネイティブ形式でデータを表すわけではありません。 File インターフェイスは Blob に基づいており、blob の機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張されています。Blob オブジェクトの API も File インターフェイスにリストされています。

他の非 BLOB オブジェクトとデータから Blob を構築するには、Blob() コンストラクターを使用します。 BLOB のデータのサブセットを作成するには、slice() メソッドを使用します。ユーザーのファイル システム上のファイルに対応する Blob オブジェクトを取得するには、ファイルのドキュメントを参照してください。

文法

var aBlob = new Blob(配列、オプション);

パラメータで指定された配列の連結で構成される内容を持つ新しく作成された Blob オブジェクトを返します。

パラメータ

• array は、 ArrayBuffer 、 ArrayBufferView 、 Blob 、 DOMString 、または Blob に格納される同様のオブジェクトの混合の配列です。 DOMStrings は UTF-8 としてエンコードされます。
• options はオプションの BlobPropertyBag 辞書であり、次の 2 つのプロパティを指定できます。
  • type、デフォルト値は "" で、これは BLOB に格納される配列コンテンツの MIME タイプを表します。
  • 行末の場合、デフォルト値は「transparent」で、行末 \n を含む文字列の書き方を指定します。 これは、行末がホスト オペレーティング システムのファイル システムに適した改行文字に変更されることを意味する「ネイティブ」、または BLOB に格納されている行末が変更されないことを意味する「透過的」の 2 つの値のいずれかです。

財産

Blob.size 読み取り専用

Blob オブジェクトに含まれるデータのサイズ (バイト単位)。

Blob.type 読み取り専用

この Blob オブジェクトに含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、値は空の文字列になります。

方法

Blob.slice([開始[, 終了[, コンテンツタイプ]]])

ソース Blob オブジェクトの指定された範囲のデータを含む新しい Blob オブジェクトを返します。

Blob.stream()

BLOB の内容を読み取ることができるReadableStreamを返します。

Blob.text()

UTF-8 形式の BLOB の内容全体を含むUSVStringに解決される promise を返します。

Blob.arrayBuffer()

バイナリ形式で BLOB のすべてのコンテンツを含むArrayBufferを含む promise を返します。

例

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // DOMStrings を含む配列 const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // BLOB を取得
oMyBlob.サイズ // 32
oMyBlob.type // 'text/html'

Blob() コンストラクターを使用すると、他のオブジェクトから Blob オブジェクトを作成できます。たとえば、文字列から BLOB を構築するには、次のようにします。

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Blobを使用して、型付き配列を指すURLを作成します。

const imgBlob = fetchedImgData(); // インターフェースを通じて返される画像リソース。返される responseType を blob に設定します。
const blob = new Blob([imgBlob], {type: 'image/png' }); // 適切な MIME タイプを渡します const url = URL.createObjectURL(blob);
// blob:d3958f5c-0777-0845-9dcf-2cb28783acaf のような URL 文字列が生成されます // img.src などで通常の URL のように使用できます。

BLOBからデータを抽出する

Blob からコンテンツを読み取る 1 つの方法は、FileReader を使用することです。次のコードは、Blob の内容を型付き配列として読み取ります。

const リーダー = 新しい FileReader();
リーダー。ArrayBuffer として読み込みます(blob)。
reader.addEventListener("load ", 関数(readRes) {
   // readRes.target.result は arrayBuffer の blob に変換されます
});

Blob の内容を読み取る別の方法は、Response オブジェクトを使用することです。次のコードは、Blob の内容をテキストとして読み取ります。

var text = 新しいレスポンス(blob).text() を待機します。

Blob は、FileReader の他のメソッドを使用して文字列またはデータ URL として読み取ることができます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。