Давайте начнем с вопроса интервью: может ли запрос GET передать изображение?

JavaScript

предисловие

Я забыл, где я видел эту тему, я думаю, что это очень интересно, позвольте мне рассказать вам свой ответ и ход мыслей.

Прежде всего, нам нужно знать, что обычно существует два метода передачи изображений:base64иfileобъект.

изображение base64

рисунокbase64Кодирование должны были видеть все:

base64по сути является строкой, аGETЗапрашиваемые параметры находятся вurlвнутри, поэтому поместите изображение прямоbase64данные вurlвнутри, это может быть достигнутоGETПросьба загрузить фотографии.

inputИзображение, полученное полем ввода,fileпредмет, картинаfileповорот объектаbase64:

// img参数： file文件或者blob
const getBase64 = img => {
  return new Promise((resolve,reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      resolve(e.target.result);
    };
    reader.onerror = e => reject(e);
    reader.readAsDataURL(img);
  })
}

Вот проблема,GETпросилurlДлина ограничена. Разные браузеры имеют разные ограничения длины. Самый длинный, вероятно,10kвокруг, по словамbase64принцип кодирования,base64Размер изображения на 1/3 больше исходного размера файла, так сказатьbase64Вы можете отправлять только очень маленькие картинки, большие картинкиbase64Слишком длинный будет усечен.

Но на самом деле это ограничение на длину задает браузер, а неGETСам запрос, то есть на стороне сервера,GETДлина запроса теоретически бесконечна, то есть можно отправлять изображения любого размера.

файловый объект

Давайте посмотрим на эту сцену:

<form action="http://localhost:8080/" method="get">
    <input type="file" name="logo">
    <input type="submit">
</form>

Выберите изображение, а затем отправьте форму, отправка может быть успешной, но интерфейс не может получить файл. просилurlстанетhttp://localhost:8080/?logo=xxx.png, но не будет нести данные изображения.

нормальная ситуация,fileДанные объекта помещаются вPOSTпросилbodyвнутри, и естьform-dataкодирование.

ТакGETли запросbodyтело? Ответ положительный.

GETиPOSTПринципиальной разницы нет, они простоHTTPДва метода запроса в протоколе отличаются только форматом сообщения (или спецификацией).

Коллеги, занимавшиеся низкоуровневой разработкой, могут быть знакомы с ним.HTTPзапрос, они получили что-то вроде этого:

Возьмите каштан, обычныйGETзапрос, они получают что-то вроде этого:

GET /test/?sex=man&name=zhangsan HTTP/1.1
Host: http://localhost:8080
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: Keep-Alive

POSTЗапрос выглядит так:

POST /add HTTP/1.1
Host: http://localhost:8080
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive

sex=man&name=Professional

такой же,DELETE,PUT,PATCHЗапросы также являются такими сообщениями. Когда нижний уровень анализирует это сообщение, ему все равно, что это за запрос, поэтому мы говоримGETзапрос также может иметьbodyтело, также может передаватьform-dataданные.

Желающие могут взятьpostmanпопробуй и увидишьGETЗапрос на загрузку изображения, может ли интерфейс получить файл изображения:

конец

В итоге,GETЗапрос может отправить фотографии, ноGETиPOSTВы все равно должны соблюдать правила, если для этого есть закулисье, просто забейте его!

Категории