什么是 blob？
在讨论 JavaScript 如何上传 blob 之前，我们需要了解什么是 blob。blob 表示二进制大型对象（Binary Large Object），是一种处理二进制数据的方法。在前端开发中，我们可以使用 blob 存储和读取二进制数据，如图像、音频、视频等文件。
创建一个 blob 对象
可以使用 Blob 构造函数创建一个新的 blob 对象，如下所示：
const binaryData = ["\x68\x65\x6c\x6c\x6f\x20\x77\x6f\x72\x6c\x64"];
const blob = new Blob(binaryData);
在上面的代码中，我们使用 Blob 构造函数创建一个新的 blob 对象，并将其存储在变量 blob 中。我们可以看到，Blob 构造函数接受一个参数，即二进制数据对象。
此外，Blob 构造函数还接受一个可选的参数，即 MIME 类型。MIME 类型是标准化的多用途互联网邮件扩展类型，用于定义特定类型的数据。如果您没有指定 MIME 类型，则会自动使用默认 MIME 类型（application/octet-stream）。
示例
const text = "Hello World";
const blob = new Blob([text], {type: "text/plain"});
在上面的示例中，我们创建了一个名为 text 的变量，其中包含文本字符串 "Hello World"。我们还创建了一个新的 blob 对象，并将其存储在变量 blob 中。在创建 blob 对象时，我们指定了 MIME 类型，这表示我们正在使用纯文本数据。
通过表单上传 blob
如果您想要将 blob 上传到服务器，最常见的方法是使用表单。要上传 blob，您需要创建一个包含 file 类型的 input，然后将 blob 作为文件值进行设置。然后，您需要将表单提交到服务器。
示例
const fileInput = document.getElementById("file-input");
function submitForm() {
const file = fileInput.files[0];
const formData = new FormData();
formData.append("file", file, file.name);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.send(formData);
}
在上面的示例中，我们创建了一个包含 file 类型的 input 元素，并将其存储在变量 fileInput 中。我们还定义了一个名为 submitForm 的函数，该函数将在用户提交表单时被触发。
在 submitForm 函数中，我们将获取用户选择的文件，如下所示：
const file = fileInput.files[0];
然后，我们将创建一个新的 FormData 对象，并将文件附加到该对象中，如下所示：
const formData = new FormData();
formData.append("file", file, file.name);
因此，我们将在表单中创建一个名为 "file" 的字段，并将其值设置为当前选择的文件。我们还将文件名作为第三个参数传递。
最后，我们将创建一个新的 XMLHttpRequest 对象，并将表单数据发送到服务器。
使用 Fetch API 上传 blob
Fetch API 是一个现代的 Web API，用于从服务器获取和发送数据。它提供了一个简单且强大的接口，可以使用 Promise 将 HTTP 请求包装在一起。
示例
const fileInput = document.getElementById("file-input");
function submitForm() {
const file = fileInput.files[0];
fetch("/upload", {
method: "POST",
body: formData
}).then(response => {
if (response.ok) {
console.log("File uploaded successfully.");
} else {
console.error("Error uploading file.");
}
}).catch(error => {
console.error("Error uploading file.", error);
});
}
在上面的示例中，我们首先获取用户选择的文件，如下所示：
const file = fileInput.files[0];
然后，我们使用 Fetch API 发送 HTTP POST 请求，并将 FormData 对象作为请求正文发送，如下所示：
fetch("/upload", {
method: "POST",
body: formData
})
最后，我们检查服务器的响应，并在控制台上记录成功或失败的消息。
结论
通过本文，我们了解了 blob 的基本概念和如何创建和上传 blob 对象。我们还了解了如何使用表单和 Fetch API 上传 blob。在实际项目中，可以根据需要选择适当的方法进行 blob 处理和上传。