JavaScript 如何上传 blob？

Blob 代表二进制大型对象，它们用于存储图像、音频或其他多媒体对象等二进制数据，有时二进制可执行代码也存储为 Blob。

我们可以使用 JavaScript 来像任何其他数据文件一样上传 blob。

JavaScript 可以使用 XMLHttpRequest 或 fetch API 上传 Blob。

1。使用 XMLHTTPRequest

XMLHttpRequest (XHR) 是一种对象形式的 API，其方法在 Web 浏览器和 Web 服务器之间传输数据。浏览器的 JavaScript 环境提供该对象。通常用于异步发送和接收数据，无需重启网站。这使得享受动态、用户友好且快速的网页成为可能。

示例

这是使用 XMLHttpRequest 上传 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);

这里，我们使用一些 blob 数据向后端 API 的 /upload 端点发出 POST 请求。服务器成功响应后，我们将注销响应。

2。使用获取API

Fetch API 允许您向服务器发出请求并从中检索数据。它内置于现代 Web 浏览器中，可用于发出 GET 和 POST 请求。 Fetch API 使用 fetch() 方法，该方法返回解析为 Response 对象的 Promise。然后可以使用该 Response 对象访问服务器返回的数据。 Fetch API 通常用作旧 XMLHttpRequest API 的替代品，并且更加现代且用户友好。它也更通用，因为它可以用来向网页托管服务器以外的服务器发出请求。

这是使用 fetch 上传 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);
});

因此，通过这种方式，您可以使用 XMLHTTPRequest 或 fetch API 将 Blob 数据从前端 vanilla JavaScript 上传到服务器，而无需使用任何第三方库。

以上就是JavaScript 如何上传 blob？的详细内容，更多请关注编程之家其它相关文章！