如何在浏览器中使用 JavaScript 从 <input type="file"/> 获取 curl -T --upload-data 选项的等效数据格式？

Question

curl 有 -T, --upload-file 选项 "transfer the specified local file to the remote URL"。

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

如何使用 curl -T 从 <input type="file" /> 使用 JavaScript 获取文件的等效数据？

Answer 1

您应该创建一个 FileReader and read the file with 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);

Answer 2

如果您想要从 javascript 访问数据，例如通过数据视图，那么您可以使用 Blob.arrayBuffer() 方法，该方法将 return 一个 Promise 解析到一个 ArrayBuffer。由于 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]);

如何在浏览器中使用 JavaScript 从 <input type="file"/> 获取 curl -T --upload-data 选项的等效数据格式？

How to get the equivalent data format of curl -T --upload-data option from <input type="file"/> using JavaScript in browser?

javascript

curl

filereader