ホームページ > 記事 > ウェブフロントエンド > フロントエンドファイルフローフライの紹介
リーダーは、端末の機能に頼らずに、ローカルに分割されたデータの分割表示を実現できないかという疑問を提起しました。特に大きな性能要件や明確な要件がない場合、通常はすべてのデータを一度に読み込んでレンダリングしますが、データ量が多かったり、携帯電話の性能が低い場合には、別の問題が発生します。
これを聞いて私は混乱しました。私は何も知りませんでしたが、同僚がそれを実装して簡単なデモを書きました
1 つのファイルがアップロードされます
現在、フロントエンドでファイルをアップロードする最も一般的な方法は、input type='file' を使用することです (実装可能な DataTransfer および HTMLCanvasElement もあります) File
ファイルが正常にアップロードされると、FileList オブジェクトが返されます (event.target.files[0] には、テキスト関連の情報がすべて含まれます。テキスト ストリーム (肉眼では見えない可能性があります)
console.log('[FileList object]:',event.target.files[0])
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);复制代码
まだ具体的な実装を書いていません。これがアイデアです。将来追加します。
Blob
Blob/slice
File
Input/file
昔、プレビューのアップロードについて書いたことを覚えていますターミナルの機能を使用せずに、画像をローカルに保存します。音声ファイルについては、その時は Blod オブジェクト、FileReader オブジェクト、createObjectURL の使用について説明しましたが、今回はそれらをすべて統合するだけでよいので、一緒に説明しましょう
var aBlob = new Blob (array, options);
Parameters、array は、ArrayBuffer、ArrayBufferView、Blob、DOMString およびその他のオブジェクト、またはその他の同様のオブジェクトの混合で構成される配列です。これは Blob に入れられます。 DOMStrings は UTF-8 としてエンコードされます。オプションは導入されていません。
Blob オブジェクトは、不変の生データ ファイルのようなオブジェクトを表します。そのデータはテキストまたはバイナリ形式で読み取ることも、データ操作のために ReadableStream に変換することもできます。
=> このようにして、テキストの一部を new Blod を通じて Blod オブジェクトに変換できることがわかります。
その後、何かを行うためにどのオブジェクトを使用できるかによって決まります。
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>复制代码
FileReader
前回の記事にあることが判明 全部使ったけど覚えていなかったり、忘れていたり、これもリピート率の高い記事です。プロパティをオブジェクトとその周囲に帰属させると、さまざまなことができるようになります。まとめてレビューしてみると、かなり感じが変わって、いろんなものが再利用できたり、あるベースで拡張・昇華することで、意味のあることがたくさんできることがわかりました。私にとって、フロントエンドとローカル データとストリームに関連する知識ポイントがより明確に認識されました。
MediaSource オブジェクト
ReadableStream
Streams API
ArrayBuffer
#関連する無料学習の推奨事項: javascript(ビデオ)
以上がフロントエンドファイルフローフライの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。