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？的詳細內容，更多請關注www.92cms.cn其它相關文章！
