JavaScript 如何上传 Blob？

Blob（Binary Large Object）是一种表示二进制数据的对象，在 Web 开发中广泛应用。本文将介绍如何使用 JavaScript 上传 Blob。

创建 Blob

在上传 Blob 之前，我们需要先创建一个 Blob。下面是一个简单的示例：

var data = "Hello, world!";
var blob = new Blob([data], { type: 'text/plain' });

这个代码片段创建了一个包含字符串 "Hello, world!" 的 Blob，类型为 "text/plain"。

上传 Blob

使用 XMLHttpRequest

我们可以使用 XMLHttpRequest 对象上传 Blob。下面是一个示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log('上传成功！');
  }
};
xhr.open('POST', '/upload');
xhr.send(blob);

这个代码片段使用 POST 方法将 Blob 上传到 /upload 地址。注意，使用 XMLHttpRequest 对象上传 Blob 时，需要将 Blob 作为 send() 方法的参数。

使用 fetch

除了 XMLHttpRequest，我们还可以使用 fetch API 上传 Blob。下面是一个示例：

fetch('/upload', {
  method: 'POST',
  body: blob
}).then(function(response) {
  console.log('上传成功！');
}).catch(function(error) {
  console.log('上传失败！');
});

这个代码片段使用 POST 方法将 Blob 上传到 /upload 地址。同样地，使用 fetch API 上传 Blob 时，需要将 Blob 作为 body 属性的值。

结语

本文介绍了如何使用 JavaScript 上传 Blob。无论是使用 XMLHttpRequest 还是 fetch API，上传 Blob 都非常简单。在实际开发中，可以根据具体需求选择合适的方法。