Comment télécharger un blob en utilisant JavaScript ?

Blob signifie Binary Large Object, ils sont utilisés pour stocker des données binaires telles que des images, de l'audio ou d'autres objets multimédias, parfois du code exécutable binaire est également stocké sous forme de Blob.

Nous pouvons utiliser JavaScript pour télécharger des blobs comme n'importe quel autre fichier de données.

JavaScript peut utiliser XMLHttpRequest ou récupérer l'API pour télécharger des blobs.

1. Utilisation de XMLHTTPRequest

XMLHttpRequest (XHR) est une API de type objet dont les méthodes transfèrent des données entre un navigateur Web et un serveur Web. L'environnement JavaScript du navigateur fournit cet objet. Généralement utilisé pour envoyer et recevoir des données de manière asynchrone sans redémarrer le site Web. Cela permet de profiter de pages Web dynamiques, conviviales et rapides.

Exemple

Ceci est un exemple d'utilisation de XMLHttpRequest pour télécharger un Blob -

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

Ici, nous effectuons une requête POST au point de terminaison /upload de l'API backend en utilisant des données blob. Une fois que le serveur a répondu avec succès, nous déconnectons la réponse.

2. Utilisez Get API

L'API Fetch vous permet de faire des requêtes à un serveur et d'en récupérer des données. Il est intégré aux navigateurs Web modernes et peut être utilisé pour effectuer des requêtes GET et POST. L'API Fetch utilise la méthode fetch(), qui renvoie une promesse qui se résout en un objet Response. L'objet Response peut ensuite être utilisé pour accéder aux données renvoyées par le serveur. L'API Fetch est souvent utilisée en remplacement de l'ancienne API XMLHttpRequest et est plus moderne et conviviale. Il est également plus polyvalent car il peut être utilisé pour effectuer des requêtes vers des serveurs autres que le serveur d'hébergement Web.

Ceci est un exemple d'utilisation de fetch pour télécharger un Blob -

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

Ainsi, de cette façon, vous pouvez télécharger des données blob du JavaScript frontend vanilla vers le serveur à l'aide de XMLHTTPRequest ou récupérer l'API sans utiliser de bibliothèque tierce.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!