如何在浏览器中使用JavaScript从中获取curl -T --upload-data选项的等效数据格式？

Question

curl具有-T, --upload-file选项以“将指定的本地文件传输到远程URL”。

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

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

Answer 1

您应该创建一个FileReader并使用FileReader方法读取文件。

readAsArrayBuffer

然后您可以像这样用axios发送请求。

readAsArrayBuffer

Answer 2

[如果您想要的是例如通过数据视图从javascript访问数据，则可以使用

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

方法，该方法会将Promise解析返回到ArrayBuffer。由于File接口是从Blob继承的，因此该方法也可以直接在File对象上使用。

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

Blob.arrayBuffer()

请注意，此方法可能需要在旧版浏览器中使用polyfill。

---

但是如果您只是希望将该文件作为二进制文件发送到服务器，则Blob.arrayBuffer()和

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

接受Blob作为请求正文：

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