Einführung des Front-End-Dateiflussflie

In der Spalte

Javascript wird der Front-End-Dateifluss vorgestellt.

Hintergrund

Der Leiter stellte die Frage, ob es möglich ist, eine segmentierte Anzeige lokaler segmentierter Daten zu realisieren, ohne auf die Fähigkeiten des Terminals zurückzugreifen. Wenn keine besonders großen Leistungsanforderungen oder klaren Anforderungen vorliegen, werden normalerweise alle Daten auf einmal geladen und gerendert. Wenn die Datenmenge jedoch groß ist oder die Leistung des Mobiltelefons schlecht ist, treten andere Probleme auf.

Als ich das hörte, war ich verwirrt. Ich wusste nichts, aber mein Kollege hat es implementiert und eine einfache Demo geschrieben.

Front-End-Implementierung Die häufigste Front-End-Methode ist die Verwendung von input type='file' (es können auch DataTransfer und HTMLCanvasElement implementiert werden, die nicht eingeführt werden File

Nachdem die Datei erfolgreich hochgeladen wurde, wird ein FileList-Objekt () verwendet. event.target.files[0] wird zurückgegeben) Es enthält alle textbezogenen Informationen, einschließlich Textströme, die mit bloßem Auge möglicherweise nicht sichtbar sind)
console.log('[FileList-Objekt] :',event.target.files[0])

2. Die Dateischnittstelle basiert auf Blod, daher verfügt File auch über die Eigenschaften und Methoden, die Blod hat, wie z. B. Slice => fängt die Daten innerhalb des angegebenen Bereichs im Quell-Blob-Objekt ab, text =>Gibt ein Versprechen im UTF-8-Format zurück, das den gesamten Inhalt des Blobs enthält (d. h. unser Blob wird in ein UTF-8-Format konvertiert). wir können lesen)

  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);复制代码

Da das FileList-Objekt erbt Für Blod-Objekte verfügen Blod-Objekte auch über Slice- und Textmethoden. Die vorherige Anforderung konnte also problemlos umgesetzt werden. Ich habe die konkrete Implementierung noch nicht geschrieben und werde sie in Zukunft hinzufügen

Andere Stream-bezogene APIs

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

3. File接口是基于Blod，所以Blod有的属性和方法，File也会有，比如slice=> 截取源 Blob 对象中指定范围内的数据，text=>返回一个promise且包含blob所有内容的UTF-8格式（就是把我们blod转化为我们可以读懂的utf-8的格式）

  <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('日志下载成功')
  };复制代码

4. 既然FileList 对象继承于Blod对象，Blod对象对象又有slice和text方法。所以之前的那个需求就很好实现了

具体实现我还么有写，思路到这里，日后补上

Blob

Blob/slice

File

Input/file

其他与流有关的API

我记得很早之前写过不借助端的力量实现本地上传预览图片音频文件，那个时候就有提到过用过Blod对象，FileReader对象，还有createObjectURL，但是这一次恰好可以把这些都整合起来，一起说一下

var aBlob = new Blob( array, options ); Ich erinnere mich, dass ich vor langer Zeit geschrieben habe, wie man Vorschaubild- und Audiodateien lokal hochlädt, ohne die Leistung des Terminals zu nutzen Blod-Objekte, FileReader-Objekte und es gibt createObjectURL, aber dieses Mal können wir sie einfach alle integrieren, lasst uns gemeinsam darüber reden

var aBlob = new Blob(array, options);

Parameter Ein Array ist eine Kombination aus ArrayBuffer, ArrayBufferView, Blob, DOMString und anderen Objekten oder eine Mischung aus anderen ähnlichen Objekten und wird in den Blob eingefügt. DOMStrings werden als UTF-8 codiert. Optionen werden nicht eingeführt. Das Blob-Objekt stellt ein unveränderliches, dateiähnliches Rohdatenobjekt dar. Seine Daten können im Text- oder Binärformat gelesen oder für Datenoperationen in einen ReadableStream konvertiert werden.

=> Auf diese Weise wissen wir, dass ein Text durch neues Blod in ein Blod-Objekt umgewandelt werden kann

Frage: Was kann Blod tun? ?

Dann kommt es darauf an, welche Objekte verwendet werden können, um etwas zu tun.

Laden Sie einen bestimmten Text herunter oder melden Sie sich auf der Webseite an.

URL.createObjectURL() Ihr Parameter ist das Blod-Objekt, mit dem eine URL erstellt werden kann Das a-Element Das Download-Attribut ermöglicht das Herunterladen eines Protokolls oder Textes =>FileReader

FileReader

Ich habe nach dem Schreiben entdeckt

Es stellte sich heraus, dass diese in früheren Artikeln verwendet wurden, ich mich aber nicht daran erinnerte, oder sie wurden vergessen. Dies ist ein weiterer Artikel mit einer hohen Wiederholungsrate. Wenn Sie einem Objekt und seiner Umgebung Eigenschaften zuordnen, können Sie viele Dinge tun. Nach einer Zusammenfassung und Überprüfung fühlt es sich ganz anders an. Es stellt sich heraus, dass viele Dinge wiederverwendet werden können oder dass durch Erweiterung und Sublimierung auf einer bestimmten Basis viele sinnvolle Dinge getan werden können. Für mich ist es noch einmal klarer geworden, dass die Wissenspunkte im Zusammenhang mit lokalen Daten und Streams in Zukunft weiter ausgebaut werden können. Diese beziehen sich alle auf Streams

Streams API
ArrayBuffer
Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonEinführung des Front-End-Dateiflussflie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!