如何在 JavaScript 中上传 Blob？

使用 JavaScript 上传 Blob

在 JavaScript 中处理音频或其他多媒体数据时，经常会遇到 Blob，它们是不可变的集合原始数据。为了有效地存储或处理这些数据，您可能需要将其上传到服务器。以下是有关如何使用 JavaScript 上传 Blob 的详细指南：

使用 FormData

上传 Blob 最简单的方法之一是通过 FormData API。它是一个标准化 API，提供了一种创建 HTTP 请求的方法，该请求的有效负载包含常规表单数据和二进制数据（例如 blob）。

jQuery.ajax 实现

要使用 jQuery.ajax 上传 Blob，请按照以下步骤操作：

1. 创建一个新的 FormData 对象：

var fd = new FormData();

2. 附加文件名和blob 到 FormData 对象：

fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

3. 将 jQuery.ajax 调用的 processData 和 contentType 选项设置为 false：

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

通过将 processData 设置为 false，我们可以防止 jQuery 将 FormData 对象转换为字符串，这对于 blob 等二进制数据是必需的。同样，将 contentType 设置为 false 可以让浏览器确定上传的适当内容类型。

自定义实现

如果您更喜欢创建 XHR (XMLHttpRequest) 对象手动，您可以使用以下步骤：

1. 初始化一个新的 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

2. 设置方法、URL 和请求标头：

xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');

3. 创建 FormData 对象并附加数据：

var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

4. 将 FormData 作为请求正文发送：

xhr.send(fd);

5. 处理 onload 事件中的服务器响应：

xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};

通过执行以下步骤，您可以使用 JavaScript 高效地将 Blob 上传到服务器，从而使您能够有效地处理和存储多媒体数据。

以上是如何在 JavaScript 中上传 Blob？的详细内容。更多信息请关注PHP中文网其他相关文章！