如何從 curl -T --upload-data 選項獲取等效數據格式<input type="file"/>在瀏覽器中使用 JavaScript？

Question

curl 有-T, --upload-file選項來“將指定的本地文件傳輸到遠程 URL”。

curl -v "http://some/data/consumer" -XPOST -T "some/file/name"

如何使用curl -T從<input type="file" />使用 JavaScript 獲取文件的等效數據？

Answer 1

如果您想要從 javascript 訪問數據，例如通過數據視圖，那么您可以使用Blob.arrayBuffer()方法，該方法將返回解析為 ArrayBuffer 的 Promise。 由於File接口繼承自Blob ，因此該方法也可直接用於 File 對象。

 document.getElementById('inp').onchange = async function(evt) { const buf = await this.files[0].arrayBuffer(); console.log( buf.byteLength ); const view = new Uint8Array(buf, 0, 4); // create a view of 4 first bytes console.log(view); };

 <input type="file" id="inp">

請注意，此方法可能需要在舊瀏覽器中使用 polyfill。

---

但是，如果您只想將該文件作為二進制文件發送到服務器，那么XHR和fetch接受 Blob 作為請求正文：

// using XHR
const xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.send(input.files[0]);

// using fetch
fetch(url, { method: "POST", body: inp.files[0] } );

// using axios
axios.post(url, inp.files[0]);

Answer 2

您應該創建一個FileReader並使用readAsArrayBuffer方法讀取文件。

const readBlob = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      resolve(e.target.result);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file); // THIS
  });

然后你可以發送請求，比如用 axios，就像這樣。

const blob = await readBlob(...);
axios.post('http://some/data/consumer', blob);