Анализ FormData

的卢.png

Это 132-я оригинальная статья без воды. Если вы хотите получить больше оригинальных статей, выполните поиск в публичном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Анализ FormData

предшествующий

В ежедневной разработке используется внутренняя упаковка компанииrequest, я не обратил особого внимания на тип параметров запроса.Это исходило из общего требования.Сервер предположил,что была проблема с предыдущими параметрами запроса и их нужно было скорректировать.После проверки выяснилось,что предыдущийRequest HeadersизContent-Typeзначение поляapplication/json, которые отличаются от правил декодирования на стороне сервера, см. в этой статье "Как SpringBoot анализирует параметры", необходимо изменить наmultipart/form-data, после завершения модификации проблема решена, кстати, подытожу.

Краткое введение в RESTful

Архитектура программного обеспечения Интернета, которую мы обычно используем сейчасRESTful, существуют некоторые правила и ограничения, такие как: протокол, доменное имя, версия, путь,HTTP 动词, код состояния и т. д., эта статья в основном суммируетHTTP 动词часть содержания, т.HTTPМетод запроса, наши часто используемые методы запроса:GET,POST,PUTЖдать,GETКаждый должен быть знаком с запросом, который обычно используется для получения ресурсов, и клиент проходитURLпараметры, но из-за запросаURLЕго можно использовать, когда есть несколько параметров, например, некоторые простые страницы списка. а такжеPOSTЭто немного сложнее, обычно используется для отправки данных, клиент проходит черезRequest BodyПередавая параметры, этот метод запроса широко используется в реальных бизнес-сценариях (особенно в промежуточных и фоновых системах).POSTКраткое введение в запрос в качестве примераFormDataсценарии использования.

представлять`FormData`

Много раз, вpostПри отправке данных мы часто используемapplication/json,application/x-www-form-urlencodedи другие типы, он действительно может охватывать большинство сценариев, но в некоторых сценариях, таких как загрузка файлов, это не очень хорошее решение.application/jsonкак заголовок запросаContent-TypeКогда значение поля используется, это означает сообщить серверу, что параметр сериализуетсяJSONСтрока, поэтому обычно используется при передаче параметровJSON.stringifyСериализуйте его, и браузерJSON.stringify API Поддержка относительно высока, ноJSON.stringifyБудут проблемы при преобразовании некоторых структур данных, такие как потеря параметров типа функции, ошибки в циклических ссылках,Blob /Fileобъект будет преобразован в{}Подождите, вы можете обратиться кПочему JSON.stringify не рекомендуется для глубокого копирования,ноJSON.stringifyЕсть еще и третий параметр.О нем могут узнать заинтересованные учащиеся.Это первый параметр.Второй,некоторые учащиеся хотят об этом рассказать.Если это картинка,то ее можно преобразовать вbase64Формат загружается для решения, хотя этот метод возможен, но он преобразуется вbase64Формат требует много символов, занимает много ресурсов и очень длинный, что неудобно для чтения, кроме того, серверу приходится парсить этот параметр при его получении, что очень хлопотно.FormDataготов к использованию.

определение

FormDataСчитается, что этот метод знаком многим учащимся, он предоставляет пару ключ-значение, представляющую данные формы.key/valueстроится известный из названия и определенияFormDataэто тип, созданный специально для форм, но на самом деле более функциональный, чемapplication/jsonГораздо сильнее, например, проблемы с загрузкой файлов, используйтеFormDataПередача параметров может быть хорошим решением,windowТакже установлен прямо наFormDataОбъекты удобно использовать напрямую.

Мы создаем экземплярFormDataобъект, а затем распечатать, как показано ниже

использовать

Видно, что на его прототипе много методов, и я лично чувствую, что этоFormDataа такжеMapЭто немного похоже, если вы посмотрите внимательно, вы можете увидеть, что естьset,get,values,hasи другие методы, мы обычно разрабатываем основное использование, котороеappendметод, обычно инкапсулирующий слойrequest, вызывающему слою нужно только передать набор параметров объекта.

const specialFileType = ['Blob', 'File'];

function formatData (_data) {
  const data = new window.FormData()
  for (const key in _data) {
    let value = _data[key]
    if (_data[key] instanceof Object && !specialFileType.includes(_data[key].constructor.name)) {
      value = JSON.stringify(_data[key])
    }
    data.append(key, value)
  }
  return data
}

`append` or `set`

Это то, что некоторые студенты должны спросить, почему бы и нетsetметод,MDNвыше явно написаноappendизkeyсуществует, оно будет добавлено к набору существующих значений, иsetНовое значение перезапишет существующее значение, поэтому выбор того, какое из них использовать, зависит от ваших потребностей.

Так в начале статьи сказаноFormDataВ загрузке файла есть преимущество, так как же оно с этим справляется?FormDataОбъекты могут устанавливать три типа значений,string,Blob,File, поэтому нам не нужно преобразовывать формат, мы можем напрямую передать файл, когда мы передаемFileприбытьformatDataслой, будет непосредственноappendприбытьFormDataобъект и может бытьgetЧтобы получить значение, а затем отправляет запрос на сервер, мы можем узнать из браузера в ссылке ясно видетьd,eТип параметраbinary, потому что это двоичный тип файла, поэтому его легко получить после того, как сервер получит значение.

cosnt View = () => {
  const [fileA, setFileA] = useState(null);
  const [fileB, setFileB] = useState(null);
  const handleClick = () => {
    console.log('fileA:', fileA)
    console.log('fileB:', fileB)
    const p = {
      a: { a1: 11, a2: 22 },
      b: [1,2,3],
      c: 123,
      d: fileA[0],
      e: fileB[0],
    }
    const data = formatData(p);
    axios({
      method: 'POST',
      url: '/aa',
      data,
      // headers: {
      //   'content-type': 'multipart/formdata'
      // },
    })
  }

  return <div>
    <div onClick={handleClick}>发送请求</div>
    <input
      type='file'
      onChange={(a) => {
        const v = a.target.files;
      setFileA(v);
    }}
    />
    <input
      type='file'
      onChange={(a) => {
        const v = a.target.files;
      setFileB(v);
    }}
    />
  </div>
}

Вы можете видеть, что есть------WebKitFormBoundary ***различать, что на самом делеFormDataКанонический флаг, следующая строка автоматически создается браузером для нас, чтобы------WebKitFormBoundary ***В качестве разделителя, а также начала и конца его содержание в основном включаетContent-Disposition,Content-Typeи т. д., гдеContent-Dispositionтребуется для,nameАтрибут представляет элемент формыkey,filenameэто имя загруженного файла, или вы можете использоватьFormDataИзменен третий параметр Кроме того, я не менял заголовок запроса при отправке запроса.Content-Type, но то, что мы на самом деле видим, верноmultipart/form-data, это потому что текущий браузер умнее, когда клиент не устанавливает заголовок запросаContent-TypeКогда параметр запроса является объектом, некоторые браузеры автоматически добавляют его в заголовок запроса для нас.Content-Type: text/plain, если передаваемые данныеFormData, это также автоматически поможет нам добавитьContent-Type: multipart/form-dataд., разные браузеры могут вести себя по-разному, но лучше всего договориться между клиентом и серверомContent-TypeТип, фиксированная доставка.

Суммировать

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

Справочная статья:

Вууху. Руан Ифэн.com/blog/2011/0…

zhuanlan.zhihu.com/p/122912935

Наггетс.Талант/пост/688572…

работы с открытым исходным кодом

Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

Плагин выбора товара

адрес с открытым исходным кодомGitHub.com/Chinese Patent Medicine-Inc/Reservoir…

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 60 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 40% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com