JavaScript 如何上傳 blob？

Blob 代表二進位大型對象，它們用於儲存影像、音訊或其他多媒體對像等二進位數據，有時二進位可執行程式碼也儲存為 Blob。

我們可以使用 JavaScript 來像任何其他資料檔案一樣上傳 blob。

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

1。使用 XMLHTTPRequest

XMLHttpRequest (XHR) 是一種物件形式的 API，其方法在 Web 瀏覽器和 Web 伺服器之間傳輸資料。瀏覽器的 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);

這裡，我們使用一些 blob 資料向後端 API 的 /upload 端點發出 POST 請求。伺服器成功回應後，我們將註銷回應。

2。使用取得API

Fetch API 允許您向伺服器發出請求並從中檢索資料。它內建於現代 Web 瀏覽器中，可用於發出 GET 和 POST 請求。 Fetch API 使用 fetch() 方法，該方法傳回解析為 Response 物件的 Promise。然後可以使用該 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 將 Blob 資料從前端 vanilla JavaScript 上傳到伺服器，而無需使用任何第三方程式庫。

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