Javascript の File 関数と Blob 関数の使用、およびファイルアップロードサーバーの作成

概要

1.File 和Blob 的使用和区别
2.创建文件并上传
3.其他方法：FileReader、createObjectURL、revokeObjectURL

1. File と Blob の用途と違い

File()
(1) 関数: コンストラクター、新しい File オブジェクトインスタンスを作成します
(2) 構文: var myFile = new File( bits, name, [ options] )
(3) パラメーター:

ビット：

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

名前：

ファイル名またはファイルパス。

オプション：

オプションの属性 type: ファイルの DOMString を含むオプションオブジェクトで
、ファイルに入れるコンテンツの MIME タイプを表します。デフォルト値は ""
lastModified: ファイルが最後に変更されたときの Unix タイムスタンプ (ミリ秒単位) を表す数値。デフォルトは Date.now() です。

例：

var file = new File(['Hello', '\n World'], 'hello-world.txt', {
    
    type: 'text/plain'})

Blob()
(1) 機能: Blob オブジェクトは、不変の生データファイルのようなオブジェクトを表します。そのデータはテキスト形式またはバイナリ形式で読み取ることができ、データ操作のためにReadableStream (読み取り専用ストリーム) に変換することもできます。
(2) 構文:パラメータvar aBlob = new Blob( array, options )
で指定された配列の連結で構成される内容を持つ、新しく作成された Blob オブジェクトを返し
ます (3) パラメータ:

配列

ArrayBuffer、ArrayBufferView、Blob、DOMString などのオブジェクトの配列、または他の同様のオブジェクトの混合物が Blob に配置されます。DOMString は UTF-8 としてエンコードされます。

オプション

オプションの BlobPropertyBag ディクショナリ。次の 2 つのプロパティを指定できます:
(1) type、デフォルト値は "" で、これは blob に入れられる配列コンテンツの MIME タイプを表します;
(2) 末尾、デフォルト値行末記号 \n を含む文字列がどのように書き込まれるかを指定します。次の 2 つの値のいずれかです。"native" (行末記号がホストオペレーティングシステムのファイルシステムに適した改行文字に変更されることを意味します)、または "transparent" (ブロブに格納されている終末記号が変更されないことを意味します)

例：

var blob = new Blob(['jyjin',  ' can always shock me!'])

2. ファイルを作成してアップロードする

コア構文:

新しいファイル()
新しいブロブ()
URL.createObjectURL()
タグがダウンロードをトリガーします

BLOB 作成ファイルとダウンロード

downloadFile(fileName, content)

function downloadFile(fileName, content) {
    
    
  // 定义触发事件的DOM
  var aLink = document.createElement('a');
  // 定义BLOB对象，声明文件内容
  var blob = new Blob([content, 'jyjin']);
  // 判定平台
  var isMac = navigator.userAgent.indexOf('Mac OS') > -1;
  // 定义事件对象 
  var evt = document.createEvent(isMac ? "MouseEvents" : "HTMLEvents");
  // 初始化事件
  // evt.initEvent("click", false, false);
  evt[isMac ? "initMouseEvent" : "initEvent"]("click", false, false);
  // 定义下载文件名称
  aLink.download = fileName;
  // 根据上面定义的 BLOB 对象创建文件 dataURL
  // URL.createObjectURL()
  aLink.href = URL.createObjectURL(blob);
  // 触发事件下载
  aLink.dispatchEvent(evt);
}

3. その他のメソッド: FileReader、createObjectURL、revokeObjectURL

ファイルリーダー

FileReader は、主にファイルの内容をメモリに読み込むために使用されます.一連の非同期インターフェイスを介して、メインスレッドでローカルファイルにアクセスできます

コンストラクタ

var reader = new FileReader();

属性

FileReader.error: ファイルの読み取り中にエラーが発生したことを示します。
FileReader.readyState: 0 - データがロードされていません。1 - データがロードされています。2 - すべての読み取り要求が完了しています。
FileReader.result: ファイルの内容。このプロパティは、読み取り操作が完了した後にのみ有効です。データの形式は、読み取り操作を開始するために使用された方法によって異なります。

イベント

FileReader.onabort: 中止イベントを処理します。このイベントは、読み取り操作が中断されたときにトリガーされます。
FileReader.onerror: エラーイベントを処理します。このイベントは、読み取り操作でエラーが発生したときに発生します。
FileReader.onload: ロードイベントを処理します。このイベントは、読み取り操作が完了すると発生します。
FileReader.onloadstart: loadstart イベントを処理します。このイベントは、読み取り操作の開始時に発生します。
FileReader.onloadend: loadend イベントを処理します。このイベントは、読み取り操作が終了 (成功または失敗) したときに発生します。
FileReader.onprogress: 進行状況イベントを処理します。このイベントは、ブロブが読み取られると発生します

方法

FileReader.abort(): 読み取り操作を中止します。戻ったとき、readyState プロパティは DONE です。
FileReader.readAsArrayBuffer(): 指定された Blob のコンテンツの読み取りを開始します。完了すると、読み取ったファイルの ArrayBuffer データオブジェクトが result プロパティに保存されます。
FileReader.readAsBinaryString(): 指定された BLOB のコンテンツの読み取りを開始します。完了すると、result プロパティには読み取ったファイルの生のバイナリデータが含まれ、メソッドはファイルをバイナリ文字列として読み取ります。通常はそれをバックエンドに渡し、バックエンドはこの文字列を介してファイルを保存できます。
FileReader.readAsDataURL(): 指定された BLOB のコンテンツの読み取りを開始します。完了すると、result プロパティには data: 読み取りファイルの内容を表す URL 形式の文字列が含まれます。
FileReader.readAsText(): 指定された BLOB のコンテンツの読み取りを開始します。完了すると、result プロパティには読み取ったファイルの内容を表す文字列が含まれます。このメソッドには 2 つのパラメーターがあり、2 番目のパラメーターはテキストのエンコーディングで、デフォルトは UTF-8 です。この方法は非常に分かりやすく、ファイルをテキストモードで読み取り、読み取り結果がテキストファイルの内容になります。

URL.createObjectURL

文法

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

The above code will generate a URL for the binary data. この URL は、img タグの src 属性など、通常 URL が配置される場所ならどこにでも配置できます。同じバイナリデータでも、URL.createObjectURL メソッドを呼び出すたびに異なる URL が取得されることに注意してください。

この URL の存在時間は Web ページの存在時間に相当し、Web ページが更新またはアンインストールされると、その URL は無効になります。(File や Blob とは異なります) さらに、手動で URL.revokeObjectURL メソッドを呼び出して URL を無効にすることもできます。

URL.revokeObjectURL

これらの URL オブジェクトが不要になったら、URL.revokeObjectURL() メソッドを呼び出してそれぞれを解放する必要があります。ドキュメントが終了すると、ブラウザーはそれらを自動的に解放しますが、パフォーマンスとメモリ使用量を最適化するには、安全なときに積極的に解放する必要があります。

参考文献:

JS フロントエンドは Blob と File を使用: https://www.its203.com/article/zhq2005095/89069851
パラメータ追加: https://segmentfault.com/a/1190000019902025
パラメータ説明: http://www.360doc. com/content/19/1007/11/13328254_865297350.shtmlファイルの
アップロード方法、ドキュメントの流れ：https ://blog.csdn.net/jianleking/article/details/118442697