Как я могу преобразовать свой объект JS в FormData
?
Причина, по которой я хочу это сделать, заключается в том, что у меня есть объект, который я построил из ~ 100 значений поля формы.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
Теперь меня просят добавить функцию загрузки файла в мою форму, что, конечно, невозможно через JSON, поэтому я планирую перейти на FormData
. Итак, есть ли способ преобразовать мой объект JS FormData
?
javascript
jquery
multipartform-data
form-data
Камран Ахмед
источник
источник
FormData
объект.Ответы:
Если у вас есть объект, вы можете легко создать объект FormData и добавить имена и значения из этого объекта в formData.
Вы не опубликовали никакого кода, поэтому это общий пример;
В документации по MDN есть больше примеров.
источник
item
это обычный объект, созданный OP, поэтому он не должен иметь никаких свойств, которые ему не принадлежат, если только кто-то не допустил ошибку, создав прототип чего-то в конструкторе объекта, и в этом случае вы окажетесь в мире проблем , и это не то, от чего мы должны защищаться.Object.keys
не является ответом, так как вам не нужно получать ключи в виде массива, а затем перебирать ключи, чтобы получить значения, вы должны использоватьfor..in
цикл.Object.keys
илиhasOwnProperty()
поскольку объект размещен в вопросе, и он не должен нуждаться в любом из них. Причина, по которой вы иногда видитеhasOwnProperty
использование плагинов и т. Д., Заключается в том, что вы никогда не знаете, что некоторые люди могут сделать сObject
конструктором, но по большей части людям не нужно тестировать унаследованные свойства на объектах, которые они создали, это признак того, что ты наверное что-то делаешь не так.С ES6 и более функциональным подходом к программированию ответ @ adeneo может выглядеть так:
Или, как вариант, используя
.reduce()
и стрелочные функции:источник
Эта функция добавляет все данные из объекта в FormData
Версия ES6 от @ developer033:
версия jQuery:
источник
&& !(data instanceof Blob)
в моем случае, чтобы загрузить свои изображения&& !(Array.isArray(data) && !data.length)
условие «если», иначе пустой массив будет удален.Остальные ответы были для меня неполными. Я начал с ответа @Vladimir Novopashin и изменил его. Вот что мне было нужно и что я обнаружил:
.prop
вместо[prop]
. НапримерformData.append('photos[0][file]', file)
не работал на google chrome, покаformData.append('photos[0].file', file)
работалСледующий код должен работать в IE11 и вечнозеленых браузерах.
источник
formData.append(root, data)
, это не означает, что он добавлен в корень.Попробуйте функцию JSON.stringify, как показано ниже
источник
У меня был сценарий, в котором вложенный JSON должен был быть сериализован линейным образом при построении данных формы, поскольку именно так сервер ожидает значения. Итак, я написал небольшую рекурсивную функцию, которая переводит JSON, который выглядит так:
Примерно так:
Сервер будет принимать данные формы в этом преобразованном формате.
Вот функция:
Призвание:
Я использую testJSON только для просмотра преобразованных результатов, так как я не смогу извлечь содержимое form_data. Пост-вызов AJAX:
источник
Извините за поздний ответ, но я боролся с этим, поскольку Angular 2 в настоящее время не поддерживает загрузку файлов. Итак, способ сделать это - отправить с
XMLHttpRequest
помощьюFormData
. Итак, я создал функцию для этого. Я использую Typescript . Чтобы преобразовать его в Javascript, просто удалите объявление типов данных.источник
[]
свойств объекта внутри числового массива, чтобы неВерсия TypeScript:
https://gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6
источник
namespace
это зарезервированное ключевое слово вTypeScript
( typescriptlang.org/docs/handbook/namespaces.html и github.com/Microsoft/TypeScript/issues/… ). Кроме того , кажется , что вы забыли иметь дело сFile
момента последнейelse
волиappend
"[object File]"
кformData
.Вы можете просто установить
qs
:Просто импортируйте:
Передать объект
qs.stringify()
:источник
Рекурсивный
источник
Этот метод преобразует объект JS в FormData:
источник
Object.entries(value).forEach((v, k) => acc.append(`${key}[${v[0]}]`, v[1]));
В моем случае у моего объекта также было свойство, которое было массивом файлов. Поскольку они бинарные, с ними следует обращаться по-другому - индекс не обязательно должен быть частью ключа. Итак, я изменил ответ @Vladimir Novopashin и @ developer033:
источник
Я использовал это для публикации моих данных объекта как данных формы.
источник
Возможно, вы ищете этот код, который получает ваш объект javascript, создает из него объект FormData и затем отправляет его на свой сервер с помощью нового Fetch API :
источник
Я ссылаюсь на это из ответа Гудрадаина . Немного редактирую в формате Typescript.
источник
Возможно, я немного опоздал на вечеринку, но это то, что я создал для преобразования единственного объекта в FormData.
Как это работает? Он преобразует и вернет все свойства, кроме объектов File, которые вы установили в списке игнорирования (2-й аргумент. Если бы кто-нибудь мог сказать мне, как лучше определить это, это поможет!) В строку json, используя
JSON.stringify
. Затем на вашем сервере вам просто нужно преобразовать его обратно в объект JSON.Пример:
Я все еще новичок в Http-запросах и JavaScript, поэтому буду очень признателен за любые отзывы!
источник
Попробуйте obj2fd => https://www.npmjs.com/package/obj2fd
источник