javascriptこのコラムでは、フロントエンドファイルフローフライを紹介します。

フロントエンドファイルフローフライの紹介

背景

リーダーは、端末の機能に頼らずに、ローカルに分割されたデータの分割表示を実現できないかという疑問を提起しました。特に大きな性能要件や明確な要件がない場合、通常はすべてのデータを一度に読み込んでレンダリングしますが、データ量が多かったり、携帯電話の性能が低い場合には、別の問題が発生します。

これを聞いて私は混乱しました。私は何も知りませんでしたが、同僚がそれを実装して簡単なデモを書きました

フロントエンドの実装

1 つのファイルがアップロードされます

現在、フロントエンドでファイルをアップロードする最も一般的な方法は、input type='file' を使用することです (実装可能な DataTransfer および HTMLCanvasElement もあります) File
ファイルが正常にアップロードされると、FileList オブジェクトが返されます (event.target.files[0] には、テキスト関連の情報がすべて含まれます。テキストストリーム (肉眼では見えない可能性があります)

console.log('[FileList object]:',event.target.files[0])

File インターフェイス Blod をベースにしているため、File にも Blod が持つ属性とメソッドが含まれます。たとえば、slice=> は、ソース Blob 内の指定された範囲内のデータをインターセプトします。 object, text=> は Promise を返し、BLOB のすべての内容の UTF-8 形式が含まれます (つまり、BLOB を読み取り可能な UTF-8 形式に変換します)

  const fileDate = event.target.files[0]
  let text = await fileDate.slice(1, 10).text()
  console.log('[截取一段Blod对象]', fileDate.slice(1, 10));
  console.log('[Blod对象转化为文本]', text);复制代码

ログイン後にコピー

FileList オブジェクトは Blod オブジェクトを継承しているため、Blod オブジェクトにもスライスメソッドとテキストメソッドがあります。したがって、前の要件は簡単に実現されました。

まだ具体的な実装を書いていません。これがアイデアです。将来追加します。

Blob

Blob/slice

File

Input/file

その他のストリーム関連 API

昔、プレビューのアップロードについて書いたことを覚えていますターミナルの機能を使用せずに、画像をローカルに保存します。音声ファイルについては、その時は Blod オブジェクト、FileReader オブジェクト、createObjectURL の使用について説明しましたが、今回はそれらをすべて統合するだけでよいので、一緒に説明しましょう

var aBlob = new Blob (array, options);

Parameters、array は、ArrayBuffer、ArrayBufferView、Blob、DOMString およびその他のオブジェクト、またはその他の同様のオブジェクトの混合で構成される配列です。これは Blob に入れられます。 DOMStrings は UTF-8 としてエンコードされます。オプションは導入されていません。

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

=> このようにして、テキストの一部を new Blod を通じて Blod オブジェクトに変換できることがわかります。

質問: Blod で何ができるのですか? ?

その後、何かを行うためにどのオブジェクトを使用できるかによって決まります。

特定のテキストをダウンロードするか、Web ページにログインします。

URL.createObjectURL() 彼女のパラメータは Blod です。 object 、URL の作成に使用されます。これを a 要素の download 属性と組み合わせて、ログまたはテキストをダウンロードできます

  <buttom onclick="onCopyHandle()">复制文本 </buttom>
 function onCopyHandle() { // 创建隐藏的可***链接
    let content = `
    name: sunseekers
    role: student
    houseName: shanghai
    url: https://github.com/sunseekers
    userAgent: ${navigator.userAgent}
    log:'这里是日志内容'
    `.trim();

    let filename = 'logFiles.md'
    const eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';

    const blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob); // 字符内容转变成blob地址

    document.body.appendChild(eleLink);
    eleLink.click(); // 触发点击
    document.body.removeChild(eleLink); // 然后移除

    Message.success('日志下载成功')
  };复制代码

ログイン後にコピー

アップロードされた画像のローカルプレビュー

画像は次のコマンドで表示できます。 img タグまたは Canvas で描画した場合は、要件を確認してください

<body>
  <p class="index">
    <input type="file" value="上传文件">
    <img width="100" height="100"></img>
  </p>
</body>
<script>
  let inputEle = document.querySelector("input")
  let img = document.querySelector("img")

  inputEle.addEventListener('change', async function (event) {
    const fileDate = event.target.files[0]
    const fileReader = new FileReader()
    fileReader.readAsDataURL(fileDate)
    fileReader.onload = e => {
      img.src = e.target.result
    }

  })
</script>复制代码

ログイン後にコピー

新しい API を学びました=>FileReader

FileReader

書いた後に気づきました

前回の記事にあることが判明全部使ったけど覚えていなかったり、忘れていたり、これもリピート率の高い記事です。プロパティをオブジェクトとその周囲に帰属させると、さまざまなことができるようになります。まとめてレビューしてみると、かなり感じが変わって、いろんなものが再利用できたり、あるベースで拡張・昇華することで、意味のあることがたくさんできることがわかりました。私にとって、フロントエンドとローカルデータとストリームに関連する知識ポイントがより明確に認識されました。