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

Mit der Fetch-API können Sie Anfragen an einen Server stellen und Daten von diesem abrufen. Es ist in moderne Webbrowser integriert und kann für GET- und POST-Anfragen verwendet werden. Die Fetch-API verwendet die fetch()-Methode, die ein Promise zurückgibt, das in ein Response-Objekt aufgelöst wird. Das Response-Objekt kann dann verwendet werden, um auf die vom Server zurückgegebenen Daten zuzugreifen. Die Fetch-API wird häufig als Ersatz für die ältere XMLHttpRequest-API verwendet und ist moderner und benutzerfreundlicher. Es ist außerdem vielseitiger, da es für Anfragen an andere Server als den Webhosting-Server verwendet werden kann.

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

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);
});

Auf diese Weise können Sie Blob-Daten von Frontend-Vanilla-JavaScript mithilfe von XMLHTTPRequest oder der Fetch-API auf den Server hochladen, ohne eine Bibliothek eines Drittanbieters zu verwenden.

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!