Wie lade ich einen Blob mit JavaScript hoch?

Blob steht für Binary Large Object. Sie werden zum Speichern von Binärdaten wie Bildern, Audio oder anderen Multimediaobjekten verwendet. Manchmal wird auch binärer ausführbarer Code als Blob gespeichert.

Wir können JavaScript verwenden, um Blobs wie jede andere Datendatei hochzuladen.

JavaScript kann XMLHttpRequest oder die Fetch-API zum Hochladen von Blobs verwenden.

1. Verwenden von XMLHTTPRequest

XMLHttpRequest (XHR) ist eine objektähnliche API, deren Methoden Daten zwischen einem Webbrowser und einem Webserver übertragen. Die JavaScript-Umgebung des Browsers stellt dieses Objekt bereit. Wird normalerweise zum asynchronen Senden und Empfangen von Daten verwendet, ohne dass die Website neu gestartet werden muss. Dies ermöglicht den Genuss dynamischer, benutzerfreundlicher und schneller Webseiten.

Beispiel

Dies ist ein Beispiel für die Verwendung von XMLHttpRequest zum Hochladen eines Blobs -

var blob = new Blob(["Some conventional data"], { type: "text/plain" });
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = function (e) {
   if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
   }
};
xhr.send(blob);

Hier stellen wir mithilfe einiger Blob-Daten eine POST-Anfrage an den /upload-Endpunkt der Backend-API. Nachdem der Server erfolgreich geantwortet hat, melden wir die Antwort ab.

2. Verwenden Sie die Get-API

var blob = new Blob(["Some conventional data"], { type: "text/plain" });
var formData = new FormData();
formData.append("file", blob);
fetch("/upload", {
   method: "POST",
   body: formData,
})
.then((response) => response.text())
.then((responseText) => {
   console.log(responseText);
});

Das obige ist der detaillierte Inhalt vonWie lade ich einen Blob mit JavaScript hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!