Как добавить данные JavaScript в FormData

Используйте примитивные значения, массивы, файлы и объекты в FormData

FormData представляет собой набор пар ключ/значение, которые вы можете отправить через XMLHttpRequest. Учитывая форму, вы можете получить ее данные в формате FormData с помощью метода submit(). В то же время имейте в виду, что вы можете создать собственный FormData, чтобы использовать его в любом multipart/form-data запросе.

Чтобы создать объект FormData, вам сначала нужно создать его экземпляр следующим образом:

const formData = new FormData();

Затем вы можете добавить к нему пары ключ/значение с помощью метода append(). Давайте узнаем, как добавлять различные типы данных JavaScript в файл FormData.

Добавьте примитивное значение к объекту FormData

Чтобы добавить примитивное поле данных, такое как строка или число, к объекту FormData, вы можете использовать метод append() следующим образом:

formData.append('fieldName', 'fieldValue');

Обратите внимание, что FormData принимает только строки. Таким образом, значения null и undefined должны быть преобразованы в пустые строки или аналогичные, прежде чем добавлять их. Кроме того, не забудьте заменить fieldName фактическим названием вашего поля.

Добавить массив к объекту FormData

Чтобы добавить массив к объекту FormData, вам нужно пройтись по массиву и добавить каждое значение по отдельности, используя метод append(), как показано ниже:

const testArray = ['1', '2', '3']; 

testArray.forEach((value) => { 
    formData.append('fieldName[]', value); 
});

Обратите внимание, что имя поля должно заканчиваться на []. В частности, FormData будет содержать столько полей fieldName[], сколько значений в массиве, каждое из которых ссылается на определенное значение в массиве. Благодаря этому специальному синтаксису ваш сервер должен автоматически распознавать и преобразовывать поля fieldName[] в массив с именем fieldName, содержащий данные массива. Этот синтаксический трюк необходим, потому что FormData поддерживает только плоские значения.

Добавить файл к объекту FormData

Чтобы добавить файл к FormData, вы можете использовать метод append() и указать имя поля, объект файла и имя файла, как показано ниже:

// get the file from a <input type="file"> element
const fileInput = document.querySelector('input[type="file"]'); 
const file = fileInput.files[0]; 

// append the file directly to a FormData
formData.append('fieldName', file, file.name);

Как видите, FormData изначально поддерживает файлы, полученные из <input type="file"> HTML-элементов.

Добавить объект к объекту FormData

Чтобы добавить объект JavaScript к FormData, вы можете преобразовать объект в большой двоичный объект, используя JSON.stringify(), а затем добавить его с помощью:

const objectHere = { 
    'a': 'fooString', 
    'b': ['1', '2', '3']
};
formData.append('fieldName', JSON.stringify(testObject));

fieldName теперь будет содержать некоторые данные в формате JSON. Обратите внимание, что вам придется проанализировать поле на сервере, чтобы использовать его данные. Например, в Node.js вы можете разобрать его с помощью JSON.parse().

Заключение

Из этой статьи вы узнали, что FormData — это полезный инструмент для отправки данных через XMLHttpRequest. Благодаря методу append() вы можете присоединять примитивные поля данных, массивы, файлы и объекты к объекту FormData. Здесь вы видели, как это сделать, на нескольких примерах.

Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной. Не стесняйтесь оставлять любые вопросы, комментарии или предложения.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.