JavaScript 如何上传blob

Blob是二进制大对象的缩写，它们被用来存储二进制数据，如图像、音频或其他多媒体对象，有时二进制可执行代码也被存储为blob。

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

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

1.使用XMLHTTPRequest

XMLHttpRequest（XHR）是一个对象形式的API，其方法在网络浏览器和网络服务器之间传输数据。浏览器的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允许你向服务器发出请求，并从中获取数据。它内置于现代网络浏览器中，可用于发出GET和POST请求。Fetch API使用fetch()方法，该方法返回一个承诺，该承诺可解析为一个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从前端vanilla JavaScript向服务器上传blob数据，而无需使用任何第三方库。