如何在 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 調用的選項設定為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');

建立資料並附加物件：

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

將FormData 作為請求正文發送：

xhr.send(fd);

處理onload 事件中的伺服器回應：

處理onload 事件中的伺服器回應：

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

處理onload 事件中的伺服器回應：處理onload 事件中的伺服器回應：處理onload 事件中的伺服器回應：透過執行下列步驟，您可以使用JavaScript 有效地將Blob 上傳到伺服器，讓您能夠有效地處理和儲存多媒體資料。

以上是如何在 JavaScript 中上傳 Blob？的詳細內容。更多資訊請關注PHP中文網其他相關文章！