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);

這裡，我們向後端 API 的 /upload 端點發出 POST 請求，並附帶一些 Blob 資料。伺服器成功響應後，我們會記錄響應內容。

2. 使用 Fetch API

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

AmitDiwan

更新於: 2023年2月6日

8K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習