Как получить эквивалентный формат данных параметра curl -T --upload-data из используя 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(), который вернет разрешение 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">

Обратите внимание, что для этого метода может потребоваться полифилл в старых браузерах.

---

Но если вы sh - просто отправить этот файл в двоичном виде на сервер, затем 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
  });

Затем вы можете отправить запрос, скажем, с помощью топор ios, вот так.

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