Detaillierte Erklärung zu Javascript-Dateien und Blobs

Datei()

Der File()-Konstruktor erstellt eine neue File-Objektinstanz.

Grammatik

var meineDatei = neue Datei(Bits, Name[, Optionen]);

Parameter

Gebisse

Ein Array, ArrayBuffer , ArrayBufferView , Blob oder DOMString Objekte enthält – oder eine beliebige Kombination davon. Dies ist der UTF-8-codierte Dateiinhalt.

Name

USVString , der den Dateinamen oder Dateipfad angibt.

Optionen optional

Optionsobjekt, das optionale Eigenschaften für die Datei enthält. Die verfügbaren Optionen sind:

• type : Ein DOMString, der den MIME-Typ des Inhalts darstellt, der in die Datei eingefügt werden soll. Der Standardwert ist "".
• lastModified : Ein numerischer Wert, der den Unix-Zeitstempel (in Millisekunden) der letzten Änderung der Datei darstellt. Der Standardwert ist Date.now().

Beispiel

var file = neue Datei(["mein Name"], "infoTxt", {
  Typ: "Text/Plain",
});

Klecks()

Ein Blob-Objekt stellt ein unveränderliches, rohes dateiähnliches Objekt dar. Seine Daten können im Text- oder Binärformat gelesen und zur Datenmanipulation auch in einen ReadableStream konvertiert werden.

Blob stellt Daten nicht unbedingt im nativen Format von JavaScript dar. Die Dateischnittstelle basiert auf Blob, übernimmt die Funktionalität von Blob und erweitert sie, um Dateien auf dem System des Benutzers zu unterstützen. Die API des Blob-Objekts ist auch in der Dateischnittstelle aufgeführt.

Um einen Blob aus anderen Nicht-Blob-Objekten und Daten zu erstellen, verwenden Sie den Blob()-Konstruktor. Um eine Teilmenge der Daten eines Blobs zu erstellen, verwenden Sie die Methode slice(). Informationen zum Abrufen eines Blob-Objekts, das einer Datei im Dateisystem des Benutzers entspricht, finden Sie in der Dateidokumentation.

Grammatik

var aBlob = neues Blob(Array, Optionen);

Gibt ein neu erstelltes Blob-Objekt zurück, dessen Inhalt aus der Verkettung der in den Parametern angegebenen Arrays besteht.

Parameter

• Array ist ein Array aus ArrayBuffer , ArrayBufferView , Blob , DOMString oder einer Mischung ähnlicher Objekte, die in das Blob eingefügt werden. DOMStrings werden als UTF-8 codiert.
• options ist ein optionales BlobPropertyBag-Wörterbuch, das die folgenden zwei Eigenschaften angeben kann:
  • Typ, der Standardwert ist "", der den MIME-Typ des Array-Inhalts darstellt, der in den Blob eingefügt wird.
  • Endungen, der Standardwert ist „transparent“, was angibt, wie Zeichenfolgen mit Zeilenenden \n geschrieben werden. Es gibt zwei Werte: „native“, was bedeutet, dass die Zeilenenden in die für das Dateisystem des Host-Betriebssystems geeigneten Zeilenumbruchzeichen geändert werden, oder „transparent“, was bedeutet, dass die im Blob gespeicherten Endungen unverändert bleiben.

Eigentum

Blob.size Schreibgeschützt

Die Größe der im Blob-Objekt enthaltenen Daten in Bytes.

Blob.type Schreibgeschützt

Eine Zeichenfolge, die den MIME-Typ der in diesem Blob-Objekt enthaltenen Daten angibt. Wenn der Typ unbekannt ist, ist der Wert eine leere Zeichenfolge.

Verfahren

Blob.slice([Start[, Ende[, Inhaltstyp]]])

Gibt ein neues Blob-Objekt zurück, das die Daten im angegebenen Bereich des Quell-Blob-Objekts enthält.

Blob.stream()

Gibt einen ReadableStream zurück, der den Inhalt des Blobs lesen kann.

Blob.text()

Gibt ein Promise zurück, das in USVString aufgelöst wird, der den gesamten Inhalt des Blobs im UTF-8-Format enthält.

Blob.arrayBuffer()

Gibt ein Promise zurück, das ArrayBuffer mit dem gesamten Inhalt des Blobs im Binärformat enthält.

Beispiel

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // Ein Array mit DOMStrings const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // Den Blob abrufen
oMyBlob.size // 32
oMyBlob.type // 'text/html'

Mit dem Blob()-Konstruktor können Sie ein Blob-Objekt aus anderen Objekten erstellen. So erstellen Sie beispielsweise einen Blob aus einer Zeichenfolge:

var debug = {hallo: "Welt"};
var blob = neuer Blob([JSON.stringify(debug, null, 2)], {Typ: 'application/json'});

Verwenden Sie Blob, um eine URL zu erstellen, die auf ein typisiertes Array verweist

const imgBlob = fetchedImgData(); // Über die Schnittstelle zurückgegebene Bildressource, setze den zurückgegebenen responseType auf blob
const blob = new Blob([imgBlob], {type: 'image/png' }); // Geben Sie einen geeigneten MIME-Typ ein const url = URL.createObjectURL(blob);
// Generiert eine URL-Zeichenfolge wie blob:d3958f5c-0777-0845-9dcf-2cb28783acaf // Sie können sie wie eine normale URL verwenden, beispielsweise auf img.src.

Extrahieren von Daten aus einem Blob

Eine Möglichkeit, den Inhalt eines Blobs zu lesen, ist die Verwendung eines FileReaders. Der folgende Code liest den Inhalt eines Blobs als typisiertes Array:

Konstante Leser = neuer FileReader();
Leser.readAsArrayBuffer(blob);
reader.addEventListener("laden ", Funktion(readRes) {
   // readRes.target.result wird in den Blob von arrayBuffer konvertiert
});

Eine andere Möglichkeit, den Inhalt eines Blobs zu lesen, ist die Verwendung des Response-Objekts. Der folgende Code liest den Inhalt eines Blobs als Text:

var text = warte auf neue Antwort(blob).text();

Der Blob kann mithilfe anderer Methoden des FileReaders als Zeichenfolge oder Daten-URL gelesen werden.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!