在不使用太多內存的情況下創建和發送大量數據的 Javascript 方法

Question

我正在測試我的設備的上傳速度！ 所以我需要一些數據發送到服務器。 在這里我創建了一些數據。

var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});

現在我將它發送到服務器

var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send)

問題是當我嘗試從 Safari iPhone 6S 上傳 90Mb 或更多數據時。 它正在重新調整錯誤

""加載資源失敗：WebKit 遇到內部錯誤""

這取決於頁面的大小等。從 iPhone 6S 上的空頁面 Safari 管理發送最多 100Mb 的數據。 但我需要大塊數據，如 500Mb 或 1Gb。

Mac/Windows 上的桌面 Chrome/Safari/FF/IE 允許超過 500Mb 的數據。

var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});
var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send);

如何在不使用太多內存的情況下創建大量數據。 我還需要使用 XHR2 發送它。 沒有 WSS 等

無論如何，我們可以做到這一點嗎？

Answer 1

根據規范，您應該能夠xhr.send()一個ReadableStream ，但是AFAIK，沒有瀏覽器確實實現了...

否則會給出類似的東西

const stream = new ReadableStream({
  start(controller) {
    setInterval( () => {
      controller.enqueue( dummy_data );
    }, interval );
  }
});
const xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.send(stream);

---

---

您的情況的解決方案是直接從設備存儲發送文件：事先創建您的文件並使用<input type="file">選擇它，瀏覽器應該為您流式傳輸它。

fileInput.onchange = (evt) => {
  const xhr = new XMLHttpRequest();
  xhr.open('post', url);
  xhr.send(fileInput.files[0]);
};