Blob 代表二进制大型对象，它们用于存储图像、音频或其他多媒体对象等二进制数据，有时二进制可执行代码也存储为 Blob。
我们可以使用 JavaScript 来像任何其他数据文件一样上传 blob。
JavaScript 可以使用 XMLHttpRequest 或 fetch API 上传 Blob。
1。使用 XMLHTTPRequest
XMLHttpRequest (XHR) 是一种对象形式的 API，其方法在 Web 浏览器和 Web 服务器之间传输数据。浏览器的 JavaScript 环境提供该对象。通常用于异步发送和接收数据，无需重启网站。这使得享受动态、用户友好且快速的网页成为可能。
立即学习“Java免费学习笔记（深入）”；
示例
这是使用 XMLHttpRequest 上传 Blob 的示例 -
这是一套由淘掌门(taozhangmen.net)衍生出来的一个拍拍客系统！这套程序也继承了淘掌门的特点：永久免费开源！无任何时间限制、功能限制、域名限制。 程序相对于淘掌门原型，已去除返利、会员系统、文章系统等。 如果需要文章，可单独下载其他的文章系统，做子目录，效果可能会更好。 程序安装过程与淘掌门相同： 下载上传到空间，执行 你的网址/install.php 安装完成后，登陆后台修改拍拍AP
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 上传到服务器，而无需使用任何第三方库。
