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

这里，我们向后端 API 的 /upload 端点发出 POST 请求，并附带一些 Blob 数据。服务器成功响应后，我们会记录响应内容。

2. 使用 Fetch API

Fetch API 允许您向服务器发出请求并从中检索数据。它内置于现代 Web 浏览器中，可用于发出 GET 和 POST 请求。Fetch API 使用 fetch() 方法，该方法返回一个 Promise，该 Promise 解析为 Response 对象。然后，可以使用此 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 上传到服务器，而无需使用任何第三方库。

更新于: 2023年2月6日

8K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告